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: 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('
$("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属性就可以抵消这个便宜效果。
这个方法在于江水博客关于弹窗的文章里找到了,在open dialog的click时间中引用了文章提到的最后一种方法。
触发弹窗
最后,根据上面的脚本,触发弹窗的链接如下
Launch Demo Modal
rel="rs-dialog"表示这是弹窗触发链接
data-target="myModal"表示要打开HTML ID为myModal的弹窗。
演示和下载
[dmengl2v]演示地址 下载来源[/dmengl2v]
bootstrap模态框 遮挡_Bootstrap Modal遮罩弹出层相关推荐
- 一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
- html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
- bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- Bootstrap模态框显示时有阴影遮罩层
如下图所示: 有遮罩层在,无法进行任何操作,只需修改默认 z-index 属性即可: .modal-backdrop{z-index:0;}
- layer弹出层详解
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...
- php layer弹出层更改背景,详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...
- html遮罩提示框代码,基于jQuery实现弹出可关闭遮罩提示框实例代码
jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实 ...
最新文章
- 国内ITSM解决方案-UNIPER
- hdu4515 小模拟
- Python: generator, yield, yield from 详解
- html对象属性大全
- linux搜狗输入法配置,liunx----配置搜狗输入法
- cmd imp导入dmp文件_PLSQL Developer导入导出表数据结构
- 【quartz】执行一次功能
- python采用哪种编码方式_Python编码格式的指定方式
- 从ACL2021看对比学习在NLP中的应用
- idea Maven图标的使用
- 博弈论 —— python
- C++基础教程之字符串
- 最严格的身份证校验(JavaScript版)
- [UI列表]LoopScrollRect无限滑动不卡顿
- 【光学】基于matlab介电常数计算【含Matlab源码 1926期】
- 小型超市网站php,[PHP源码]便利100豪华版网上超市 ecshop生活便利商城源码/13165
- win下处理器组概念
- 软件硕士和计算机硕士,详解软件工程硕士和计算机硕士区别
- 2021年终总结及2022年展望
- 去掉最低工资和最高工资后的工资平均值(Java实现2种算法)
热门文章
- 30个Python常用极简代码,拿走就用,赶紧收藏!
- 第三节:快速编译TypeScript,提高开发效率
- 模型压缩与加速:Octave Convolution
- 人群频率 | gnomAD数据库简介 (一)
- 给刚博士毕业的年轻学者9点建议,最后一条:抓紧结婚,生娃!
- 一图感受各种机器学习算法
- 厉害了!顶级学术期刊封面的“中国元素”
- 生物科研神器!30分钟把人家一天的工作都给干完了!
- 只需一行代码,完美呈现Markdown格式,写作展示两不误
- 电脑主板接口_PCI接口借尸还魂?精英发布新款B450电脑主板,配备老式PCI接口...