html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...

页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态

实现思路：

1、需要有一个层将body遮住，放在body上方。

2、修改body的overflow属性值为：hidden

废话不多说了，将关键代码贴出来了，兼容火狐，谷歌，ie

遮罩层的样式代码，红色部分是关键的部分

复制代码代码如下:

.cover {

position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); background-color: #777;

z-index: 1002; left: 0px; display:none;

opacity:0.5; -moz-opacity:0.5;

}

网页部分的代码

复制代码代码如下:

点我显示遮罩层

js部分的代码

复制代码代码如下:

function showMask(){

$('body').css("overflow","hidden")

$("#cover").show();

}

懂bootstrap的过来看看，bootstrap模态框的问题

在触发模态框的组件上添加以下属性

data-backdrop="static"

bootstrap使用模态框当弹出两层的时，遮罩层会把原有的透明度减少

为什么会有两个弹出框呢

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。

html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...相关推荐

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
微信 html页面遮罩层,微信内网页提示浏览器打开代码——遮罩层提示代码实现！...
微信中打开链接时,弹出遮罩提示用户,请点击右上角在浏览器中打开如何实现?经搜集整理并且验证可用后总结出可用版本. 以下是代码部分: 第一步:判断微信的UA. var ua = navigator.us ...
水滴石穿之页面遮罩层实现、向window.open()打开的窗口POST数据
1.页面遮罩层实现 <script> function locking() { document.all.ly.style.display="block&qu ...
css中间镂空,css3如何实现遮罩层镂空效果 css3遮罩层镂空效果的多种实现方法
css3如何实现遮罩层镂空效果?本篇文章小编给大家分享一下css3遮罩层镂空效果的多种实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 先看看效果 [ 方法一:截图模 ...
Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
一个遮罩层怎么遮罩两个图层_遮罩效果全解（13种方法）
初学者关于遮罩的话题问的较多,下面我将遮罩的一些常见问题进行一下归纳. 1.请问遮罩的原理是什么? 遮罩层好比黑夜中的一支手电筒,照在哪儿(指被遮罩层)哪儿就显现. 第一步:创建两个图层,命名,一个是 ...
H5页面遮罩弹框下层还能滚动的问题
在页面上显示一个遮罩层,这是非常常见的操作,在遮罩层上操作,下层也会默认跟随手指滚动此处就是要在显示遮罩的时候禁止下层滚动. 首先设置一个全局变量 var canScroll=false; 页面初始 ...
用jQuery实现页面遮罩弹出框
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: <div id="main"> ...
layer执行父窗口ajax方法,layer 弹出层回调函数调用弹出层页面函数
1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...

html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...相关推荐

最新文章

热门文章