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 写类方式之一
Jul 05 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
javascript动态加载二
Aug 22 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
Bootstrap面板学习使用
Feb 09 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
php 邮件发送问题解决
2014/03/22 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
Prototype Array对象 学习
2009/07/19 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
js的对象与函数详解
2019/01/21 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python提取网页中超链接的方法
2016/09/18 Python
python针对excel的操作技巧
2018/03/13 Python
本科毕业生自我鉴定
2013/11/02 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
领导接待方案
2014/03/13 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
小学领导班子对照材料
2014/08/23 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
职工培训工作总结
2015/08/10 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android