bootstrap模态框 遮挡_Bootstrap Modal遮罩弹出层

之前发表过一篇文章叫Bootstrap Modal弹窗代码，其实那个只是一个弹出层代码而已，并不是仿造Bootstrap的，Bootstrap Modal是给外层添加固定fixed，然后内容使用自适应靠上居中方式。今天分享的这篇文章正是这种方式。

HTML结构

考虑到内容区域需要居中对齐，所以至少要有一个div来定位和显示背景，再用一个div居中内容，内容区域想分成header、body和footer。

×

标题

内容

添加样式

透明背景用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: hidde