首页 > 其他 > 详细

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

时间:2016-05-05 22:31:35      阅读:256      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!