您的位置：首页 > 其它

点击按钮后背景变灰+阻止事件

2015-10-30 14:35 246 查看
最近做了几个点击按钮出现弹出框后，背景变灰且内容不可操作，上网一查有个遮罩层的东东，感觉很神奇。原理是设置一个隐藏的、无内容的div，当点击按钮后显示这个div并通过绝对定位中的fixed遮住内容，以此达到遮住的效果。以下是我写的一个简单的demo，重点是那个蒙板的css属性。
<!DOCTYPE html>
<html>
<head>
<style>
html, body, div, a{ margin: 0; padding: 0;}
.container{ text-align: center;}

/* 弹出框背景蒙板 */
.modal-backdrop{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .8; z-index: 1000;}

/* 弹出框 */
.modal-box{ display: none; position: fixed; top: 50%; margin-top: -100px; left: 50%; margin-left: -250px; text-align: center; width: 500px; height: 200px; background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index:1100;}
.modal-box .box-title{ margin: 40px 0; font-size: 18px; color: #000;}
.modal-box .box-btn-sure{ display: block; margin: 0 auto; width: 200px; height: 50px; line-height:50px; font-size: 14px; color: #fff; background-color: #FD460D; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}

</style>
<title>弹出框demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div class="container">
<a href="javascript:void(0);" title="点击按钮" id="btn_1">点我弹出框</a>
</div>
<div class="modal-backdrop"></div>
<div class="modal-box">
<div class="box-title">这是一个弹出框</div>
<a href="javascript:void(0);" title="点击按钮" class="box-btn-sure" id="box-btn-sure">确 定</a>
</div>
<script type="text/javascript">
$("#btn_1").on("click", function(){
<u>$(".modal-backdrop").css("display", "block");</u>
$(".modal-box").css("display", "block");
});
$("#box-btn-sure").on("click", function(){
$(".modal-box").css("display", "none");
<u>$(".modal-backdrop").css("display", "none");</u>
});
</script>
</body>
</html>
补充：后来又做了个手机的背景蒙板，发现虽然能实现但内容还是可以滑动和点击，上网一查有一个移动端页面touch会穿透的常见bug，解决办法如下：
$(".modal-backdrop").on("touchmove", function(event){
//阻止手机滑动事件冒泡和默认事件
event.stopPropagation();
event.preventDefault();
});
这句话的意思是，阻止滑动的默认事件，多查了一些，遂，延伸一下：1、阻止事件冒泡,使成为捕获型事件触发机制.
123456789
function
 
stopBubble(e)
{
//如果提供了事件对象，则这是一个非IE浏览器
if
 
(
e && e.stopPropagation )
    
//因此它支持W3C的stopPropagation()方法
    
e.stopPropagation();
else
    
//否则，我们需要使用IE的方式来取消事件冒泡
    
window.event.cancelBubble
= 
true
;
}
 2、当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.
12345678910
//阻止浏览器的默认行为
function
 
stopDefault(
e ) {
    
//阻止默认浏览器动作(W3C)
    
if
 
(
e && e.preventDefault )
        
e.preventDefault();
    
//IE中阻止函数器默认动作的方式
    
else
        
window.event.returnValue
= 
false
;
    
return
 
false
;
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航