zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    BOM(JavaScript高程笔记)
    初识AJAX
    初识DOM
    《JavaScript DOM 编程艺术》读书笔记
    git/ TortoiseGit 在bitbucket.org 使用证书登陆
    原生JS的对象常用操作总结
    js 判断对象相等
    IE 坑爹的浏览器兼容模式
    Linux+mysql混杂
    前端-CS-04
  • 原文地址:https://www.cnblogs.com/6min/p/11721497.html
Copyright © 2011-2022 走看看