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

贯彻思路:

近来在做手提式无线电话机端效果的时候,页面必要在下拉菜单滚动的时候,阻止页面包车型客车轮转。于是就切磋了弹指间bootstrap模态框的贯彻原理。

1、须求有二个层将body遮住,放在body上方。

兑现思路:

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

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

废话十分少说了,将首要代码贴出来了,宽容火狐,Google,ie

2、更正body的overflow属性值为:hidden

遮罩层的样式代码,嫩绿部分是至关重大的一对

废话十分的少说了,将重视代码贴出来了,宽容火狐,Google,ie

复制代码 代码如下:.cover {position:fixed;
top: 0px; right:0px; bottom:0px;filter: 阿尔法(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(State of Qatar”
点笔者显得遮罩层/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”State of Qatar$(“#cover”).show();}

 

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

js部分的代码。


You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图