Bootstrap Modal遮罩弹出层(完整版)
之前发表过一篇文章叫BootstrapModal弹窗代码，其实那个只是一个弹出层代码而已，并不是仿造Bootstrap的，Bootstrapmodal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章正是这种方式。
html结构
考虑到内容区域需要居中对齐，所以至少要有一个div来定位和显示背景，再用一个div居中内容，内容区域想分成header、body和footer。
<divclass="rs-dialog"id="myModal1"> <divclass="rs-dialog-box"> <aclass="close"href="#">×</a> <divclass="rs-dialog-header"> <h3>标题</h3> </div> <divclass="rs-dialog-body"> <p>内容</p> </div> <divclass="rs-dialog-footer"> <inputtype="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的滚动条模拟浏览器滚动条。
弹窗打开关闭时滚动效果用css3transition来实现。
.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.15slinear;
-o-transition:opacity.15slinear;
transition:opacity.15slinear;
}
.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-transform0.3sease-out;
-o-transition:-o-transform0.3sease-out;
transition:transform0.3sease-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:30pxauto;
width:600px;
background-color:#ffffff;
border-radius:10px;
border:1pxsolid#999999;
border:1pxsolidrgba(0,0,0,0.2);
-webkit-box-shadow:03px9pxrgba(0,0,0,0.5);
box-shadow:03px9pxrgba(0,0,0,0.5);
}
.logged-in.rs-dialog.rs-dialog-box{
margin-top:60px;
}
.rs-dialog-boxa.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:01px0#ffffff;
color:#fff;
background-color:#8b8b8b;
border:2pxsolid#fff;
border-radius:25px;
box-shadow:003px1px#999;
outline:none;
}
.rs-dialog-boxa.close:hover{
background-color:#444;
}
.rs-dialog-header{
padding:20px;
border-bottom:1pxsolid#e5e5e5;
}
.rs-dialog-headerh3{
font-size:18px;
}
.rs-dialog-body{
padding:20px;
line-height:1.4
}
.rs-dialog-bodyp{
margin-bottom:10px;
}
.rs-dialog-footer{
padding:20px;
border-top:1pxsolid#e5e5e5;
overflow:hidden;
}
@media(max-width:767px){
.rs-dialog.rs-dialog-box{
width:auto;
margin:30px20px;
}
}
添加控制脚本
大部分用css实现，所以脚本通过简单的addClass和removeClass就可以控制开关。
还可以增加点击弹窗外部关闭窗口的功能。
jQuery(document).ready(function($){
$('body').append('<divclass="rs-overlay"/>');
$("a[rel='rs-dialog']").each(function(){
vartrigger=$(this);
varrs_dialog=$('#'+trigger.data('target'));
varrs_box=rs_dialog.find('.rs-dialog-box');
varrs_close=rs_dialog.find('.close');
varrs_overlay=$('.rs-overlay');
if(!rs_dialog.length)returntrue;
//Opendialog
trigger.click(function(){
//Getthescrollbarwidthandavoidcontentbeingpushed
varw1=$(window).width();
$('html').addClass('dialog-open');
varw2=$(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');
});
returnfalse;
});
//Closedialogwhenclickingontheclosebutton
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','');
});
returnfalse;
});
//Closedialogwhenclickingoutsidethedialog
rs_dialog.click(function(e){
rs_close.trigger('click');
});
rs_box.click(function(e){
e.stopPropagation();
});
});
});
防止网页内容偏移
打开弹窗时给body增加overflow:hidden属性，导致滚动条消失，这时会使网页的内容往右移动一下，待弹窗打开滚动条再出现时，又会复原，视觉效果不友好。如果在有滚动条的情况下知道其宽度，给body增加padding-right属性就可以抵消这个便宜效果。
触发弹窗
最后，根据上面的脚本，触发弹窗的链接如下
<ahref="#"rel="rs-dialog"data-target="myModal">LaunchDemoModal</a>
rel="rs-dialog"表示这是弹窗触发链接
data-target="myModal"表示要打开HTMLID为myModal的弹窗。