之前發表過一篇文章叫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 dialogtrigger.click(function(){//Get the scrollbar width and avoid content being pushedvar 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 buttonrs_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 dialogrs_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的彈窗。
新聞熱點
疑難解答
