iphone对fixed模态框支持不太好,弹出窗口中滚动点击穿透的bug

iphone对fixed展现层中存在滚动内容支持非常不好, 尤其是背景页面产生滚动以后,输入控件就找不到了, 取消冒泡也不行,最后是这么解决的,可以参考

<style>
.modeldiv{
display:none;
position:absolute;
z-index:1000;
top:5%;
left:2rem;
right:2rem;
height:80%;
-moz-border-radius:1rem;
-webkit-border-radius:1rem;
border-radius:1rem;
overflow:hidden;
-webkit-overflow-scrolling:touch;
overflow-y:scroll;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.ban_body{
height: 100%;
overflow: hidden;
}
</style>

<div class="modeldiv">
    <iframe src="" frameborder="0" style="width:100%;height:100%;"></iframe>
</div>

<a href="void();" id="demo">弹出</a>

<script>
$(function(){
    $('#demo').on('click', function(){
        $('.modeldiv').show();
        //打开的时候给body添加样式
        $("html,body").addClass("ban_body");
        //关闭的时候移除样式
        //$("html,body").removeClass("ban_body");
    });
});
</script>

 

posted @ 2019-10-22 18:09  1553  阅读(373)  评论(0编辑  收藏  举报