Bootstrap Modal遮罩弹出层(完整版)


Posted in Javascript onNovember 21, 2016

之前发表过一篇文章叫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的弹窗。

Javascript 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 #Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 #Javascript
js学习之----深入理解闭包
Nov 21 #Javascript
浅谈js原生拖放
Nov 21 #Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 #Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 #Javascript
JS中判断null的方法分析
Nov 21 #Javascript
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
详解python中__name__的意义以及作用
2019/08/07 Python
python 写一个文件分发小程序
2020/12/05 Python
python 如何上传包到pypi
2020/12/24 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
农贸市场管理制度
2014/01/31 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
环保建议书600字
2014/05/14 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
启动仪式策划方案
2014/06/14 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
施工安全保证书
2015/05/09 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
python读取mnist数据集方法案例详解
2021/09/04 Python