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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
微信支付扫码支付php版
2016/07/22 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
layui 实现表格某一列显示图标
2019/09/19 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
Python 3中的yield from语法详解
2017/01/18 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
flask开启多线程的具体方法
2020/08/02 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
党员干部群众路线个人整改措施
2014/09/18 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
黄埔军校观后感
2015/06/10 职场文书
祝寿主持词
2015/07/02 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
python 详解turtle画爱心代码
2022/02/15 Python