频道导航

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

2019-01-06 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了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来实现。

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.2); -webkit-Box-shadow: 0 3px 9px rgba(0,0.5); Box-shadow: 0 3px 9px rgba(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就可以控制开关。

还可以增加点击弹窗外部关闭窗口的功能。

'); $("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(); }); }); });