弹出层,阻止页面滚动--阻止事件冒泡

今天要实现一个效果:点击图片后弹出一个浮层,该浮层内容比较多,设置overflow:auto;希望浮层滚动的时候,底层的页面是不动的。在网上查了很多,都没有找到解决方案,有人在问,但是并没有人回答。所以特地跑去问了师傅,在这里分享一下,希望遇到同样问题的小白,可以有所帮助。

首先,把底层页面放在一个div中,包起来,设置它的css样式:

1 #main{
2     position: fixed;
3     width: 100%;
4     top:0;
5     height:100%;
6     z-index:1;
7     overflow: auto;
8 }

(其中,z-index的值根据自身情况设定。)

然后,把要弹出的浮层也放在一个div中,并为其设置css样式:

1 #Tan{
2     position: fixed;
3     width: 100%;
4     top:0;
5     display:none;
6     height:100%;
7     z-index: 2999;
8     overflow: auto;
9 }

(同样,z-index值根据自身情况设定)

最后,就是js代码部分:

1 document.getElementById(floatLayer).addEventListener('DOMMouseScroll',function(event){
2     
3     event.stopPropagation();
4    
5 },false);

给弹出层添加一个滚轮事件 DOMMouseScroll

剩下的就是用javascript设置页面的display,实现页面的出现和消息。

posted @ 2016-05-05 20:05  十二月下的猫  阅读(5992)  评论(0编辑  收藏  举报