实用的弹出层效果（阻止浏览器的默认行为）

最新推荐文章于 2024-04-26 16:06:24 发布

omyrobin2

最新推荐文章于 2024-04-26 16:06:24 发布

阅读量1.4k

点赞数

分类专栏：弹出层效果文章标签：前端移动

本文链接：https://blog.csdn.net/gh1205/article/details/52034815

版权

弹出层效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实用的弹出层效果（阻止浏览器的默认行为）

自己写的，分享给大家，相信前端同学都能用得到

在移动端时经常遇到经常说到的浏览器的默认行为，由于浏览器默认的为冒泡型事件触发机制，所有会触发你不想触发的事件，
尽管蒙层显示，滑动时底部的内容也会透过弹出层继续滑动，导致蒙层底部会有白边，

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}