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来实现。 添加控制脚本大部分用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(); }); }); });防止网页内容偏移打开弹窗时给body增加overflow:hidden属性，导致滚动条消失，这时会使网页的内容往右移动一下，待弹窗打开滚动条再出现时，又会复原，视觉效果不友好。如果在有滚动条的情况下知道其宽度，给body增加padding-right属性就可以抵消这个便宜效果。 触发弹窗最后，根据上面的脚本，触发弹窗的链接如下 rel="rs-dialog"表示这是弹窗触发链接 data-target="myModal"表示要打开HTML ID为myModal的弹窗。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |