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

来源：互联网发布：apache cgi 配置编辑：程序博客网时间：2024/06/01 14:05

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

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

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

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}

请留言指教，哈哈哈！！！

0 0