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

网友投稿 469 2023-06-28


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

之前发表过一篇文章叫Bootstrap Modal弹窗代码,其实那个只是一个弹出QYWFiGLAZV层代码而已,并不是仿造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.shttp://how( '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(functiQYWFiGLAZVon(e){

rs_close.trigger('click');

});

rs_box.click(function(e){

e.stopPropagation();

});

});

});

防止网页内容偏移

打开弹窗时给body增加overflow:hidden属性,导致滚动条消失,这时会使网页的内容往右移动一下,待弹窗打开滚动条再出现时,又会复原,视觉效果不友好。如果在有滚动条的情况下知道其宽度,给body增加padding-right属性就可以抵消这个便宜效果。

触发弹窗

最后,根据上面的脚本,触发弹窗的链接如下

Launch Demo Modal

rel="rs-dialog"表示这是弹窗触发链接

data-target="myModal"表示要打开HTML ID为myModal的弹窗。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:全面解析node 表单的图片上传
下一篇:Bootstrap Modal遮罩弹出层代码分享
相关文章

 发表评论

暂时没有评论,来抢沙发吧~