实用的弹出层效果(阻止浏览器的默认行为)
自己写的,分享给大家,相信前端同学都能用得到
在移动端时经常遇到经常说到的浏览器的默认行为,由于浏览器默认的为冒泡型事件触发机制,所有会触发你不想触发的事件,
尽管蒙层显示,滑动时底部的内容也会透过弹出层继续滑动,导致蒙层底部会有白边,
- 1、在蒙层显示时阻止浏览器的默认行为
- 2、在蒙层消失是恢复浏览器的默认行为
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>弹框</title>
</head>
<body id="bodys">
<div class="btn" id="Return">点击</div>
<div class="hide_mask" id="hide_mask"></div>
<div class="hideBox-main" id="hideBox-main">
<div class="hideBox-box" id="hideBox-box">弹出层</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var bodyScroll = function (e) { e.preventDefault(); },
returnBtn = $('Return'),
hide_mask = $('hide_mask'),
hideBox = $('hideBox-main');
returnBtn.onclick=function(){
hide_mask.style.display="block";
hideBox.style.display="block";
document.addEventListener('touchmove',bodyScroll,false);
hide_mask.onclick=function(){
this.style.display="none";
hideBox.style.display="none";
document.removeEventListener('touchmove',bodyScroll,false);
}
}
</script>
</body>
</html>
css代码
*{margin:0;padding: 0;list-style:none;font:normal normal 300 16px/1.5 "微软雅黑",arial,verdana;}
.btn{width: 50%;margin: 50% auto;line-height: 40px;text-align: center;line-height: 40px;background: #008573;color: #fff;}
.hide_mask{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0,0,0,.5);
display: none;
}
.hideBox-main{
position: fixed;
left:50%;
top: 30%;
width:60%;
height: 160px;
margin-left: -30%;
overflow: hidden;
z-index: 1099;
font-weight: 400;
text-align: center;
background-color: transparent;
background:#fff;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
border-radius: 3px;
display: none;
-webkit-animation:zoomIn 0.2s ease;
animation-name:zoomIn 0.2s ease;
}
.hideBox-btn{
height: 53px;
line-height: 53px;
text-align: center;
font-size: 17px;
color: #fa2855;
border-top: 1px solid #e3e3e3;
}
.hideBox-box{
height: 180px;
line-height: 160px;
font-size: 18px;
}
@-webkit-keyframes zoomIn{
0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}
}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
请留言指教,哈哈哈!!!