之前發表過一篇文章叫Bootstrap Modal彈窗代碼,其實那個只是一個彈出層代碼而已,並不是仿造Bootstrap的,Bootstrap modal是給外層添加固定fixed,然後內容使用自適應靠上居中方式。今天分享的這篇文章正是這種方式。
html結構
考慮到內容區域需要居中對齊,所以至少要有一個div來定位和顯示背景,再用一個div居中內容,內容區域想分成header、body和footer。
<div class="rs-dialog" id="myModal1"> <div class="rs-dialog-box"> <a class="close" href="#">×</a> <div class="rs-dialog-header"> <h3>標題</h3> </div> <div class="rs-dialog-body"> <p>內容</p> </div> <div class="rs-dialog-footer"> <input type="button" class="close" value="Close" style="float:right"> </div> </div> </div>
添加樣式
透明背景用background和opacity來實現,也可以選擇rgba,只是IE8及以下浏覽器不支持。為了讓一個position為fixed的div鋪滿整個窗口,可以將其top、right、left、bottom屬性全部設為0。
當內容區域過長時,模擬浏覽器縱向滾動條,方法是將body(或HTML)的overflow屬性設為hidden,禁止浏覽器真正的滾動條出現,然後給彈窗最外層的div設置overflow-y:auto,用這個div的滾動條模擬浏覽器滾動條。
彈窗打開關閉時滾動效果用css3 transition來實現。
.dialog-open{ overflow-y:hidden !important; } .rs-overlay{ background:#000; opacity:.5; filter: alpha(opacity=50); position: fixed; z-index: 1000; top:0; bottom:0; left:0; right:0; display: none; } .rs-dialog{ display: none; opacity: 0; overflow: hidden; position: fixed; top:0; bottom:0; left:0; right:0; z-index: 1040; -webkit-overflow-scrolling: touch; outline: 0; /*background: rgba(0,0,0,.5);*/ -webkit-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; } .dialog-open .rs-dialog{ overflow-x:hidden; overflow-y:auto; } .rs-dialog.in{ opacity: 1; } .rs-dialog .rs-dialog-box { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .rs-dialog.in .rs-dialog-box { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .rs-dialog .rs-dialog-box{ position: relative; margin:30px auto; width: 600px; background-color: #ffffff; border-radius:10px; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); } .logged-in .rs-dialog .rs-dialog-box{ margin-top:60px; } .rs-dialog-box a.close{ position: absolute; top: -12px; right: -12px; width: 25px; height: 25px; padding: 0; line-height: 25px; font-size:20px; font-family:Arial,sans-serif; font-weight:bold; text-decoration:none; text-align:center; text-shadow: 0 1px 0 #ffffff; color: #fff; background-color:#8b8b8b; border:2px solid #fff; border-radius: 25px; box-shadow:0 0 3px 1px #999; outline: none; } .rs-dialog-box a.close:hover{ background-color:#444; } .rs-dialog-header{ padding: 20px; border-bottom: 1px solid #e5e5e5; } .rs-dialog-header h3{ font-size: 18px; } .rs-dialog-body{ padding: 20px; line-height: 1.4 } .rs-dialog-body p{ margin-bottom:10px; } .rs-dialog-footer{ padding: 20px; border-top:1px solid #e5e5e5; overflow: hidden; } @media (max-width: 767px) { .rs-dialog .rs-dialog-box { width: auto; margin: 30px 20px; } }
添加控制腳本
大部分用css實現,所以腳本通過簡單的addClass和removeClass就可以控制開關。
還可以增加點擊彈窗外部關閉窗口的功能。
jQuery(document).ready(function($){ $('body').append('<div class="rs-overlay" />'); $("a[rel='rs-dialog']").each(function(){ var trigger = $(this); var rs_dialog = $('#' + trigger.data('target')); var rs_box = rs_dialog.find('.rs-dialog-box'); var rs_close = rs_dialog.find('.close'); var rs_overlay = $('.rs-overlay'); if( !rs_dialog.length ) return true; // Open dialog trigger.click(function(){ //Get the scrollbar width and avoid content being pushed var w1 = $(window).width(); $('html').addClass('dialog-open'); var w2 = $(window).width(); c = w2-w1 + parseFloat($('body').css('padding-right')); if( c > 0 ) $('body').css('padding-right', c + 'px' ); rs_overlay.fadeIn('fast'); rs_dialog.show( 'fast', function(){ rs_dialog.addClass('in'); }); return false; }); // Close dialog when clicking on the close button rs_close.click(function(e){ rs_dialog.removeClass('in').delay(150).queue(function(){ rs_dialog.hide().dequeue(); rs_overlay.fadeOut('slow'); $('html').removeClass('dialog-open'); $('body').css('padding-right', ''); }); return false; }); // Close dialog when clicking outside the dialog rs_dialog.click(function(e){ rs_close.trigger('click'); }); rs_box.click(function(e){ e.stopPropagation(); }); }); });
防止網頁內容偏移
打開彈窗時給body增加overflow:hidden屬性,導致滾動條消失,這時會使網頁的內容往右移動一下,待彈窗打開滾動條再出現時,又會復原,視覺效果不友好。如果在有滾動條的情況下知道其寬度,給body增加padding-right屬性就可以抵消這個便宜效果。
觸發彈窗
最後,根據上面的腳本,觸發彈窗的鏈接如下
<a href="#" rel="rs-dialog" data-target="myModal">Launch Demo Modal</a>
rel="rs-dialog"表示這是彈窗觸發鏈接
data-target="myModal"表示要打開HTML ID為myModal的彈窗。