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

实现思路:

最近在做手机端效果的时候,页面需要在下拉菜单滚动的时候,阻止页面的滚动。于是就研究了一下bootstrap模态框的实现原理。

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

实现思路:

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

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

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

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;}

.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;
}

网页部分的代码

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

复制代码 代码如下:body

<body>

div div /div a href=”javascript:;” onclick=”showMask()”
点我显示遮罩层/abr / /div div /div/body

  <div >
    <div ></div>
    <a onclick=”showMask()” >点我显示遮罩层</a><br
/>
  </div>
  <div id=”cover” ></div>
</body>

js部分的代码

网页部分的代码

复制代码 代码如下:function
showMask(){$(‘body’).css(“overflow”,”hidden”)$(“#cover”).show();}

 

function showMask(){
$(‘body’).css(“overflow”,”hidden”)
$(“#cover”).show();
}

js部分的代码。


发表评论

电子邮件地址不会被公开。 必填项已用*标注