码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-05-05 22:31:53      阅读:1800      评论:0      收藏:0      [点我收藏+]

标签:

今天要实现一个效果:点击图片后弹出一个浮层,该浮层内容比较多,设置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,实现页面的出现和消息。

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

标签:

原文地址:http://www.cnblogs.com/hsprout/p/5463184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!