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>

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

  1. 苹果手机iOS11中fixed弹出框中input光标错位问题

    最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...

  2. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  3. Bootstrap 模态框(也可以说的弹出层)

    最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...

  4. div样式position:fixed,不随屏幕滚动而滚动,导致屏幕太小时弹出层被遮挡,无法滚动查看的解决办法

    window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...

  5. IOS中position:fixed弹出框中的input出现光标错位的问题

    解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...

  6. iphone弹出窗口效果的制作(Core animation, CALayer)

    效果类似人人网微薄客户端的弹出效果 static CGFloat kTransitionDuration = 0.3; - (void)initView { UIWindow *window = [U ...

  7. centos 7 下vnc弹出窗口太小解决方法

    使用以下参数启动 : vncserver :2 -geometry 800x600

  8. iOS:模态弹出窗控制器UIPopoverPresentationController

    模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...

  9. 弹出视图/弹出模态presentViewController与presentModalViewController

    一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...

随机推荐

  1. C# Stream篇(四) -- FileStream

    FileStream 目录: 如何去理解FileStream? FileStream的重要性 FileStream常用构造函数(重要) 非托管参数SafeFileHandle简单介绍 FileStre ...

  2. python函数-迭代器&生成器

    python函数-迭代器&生成器 一.迭代器 1 可迭代协议 迭代:就是类似for循环,将某个数据集内的数据可以“一个挨着一个取出来” 可迭代协议: ① 协议内容:内部实现__iter__方法 ...

  3. 第十五篇 用户认证auth

    用户认证auth 阅读目录(Content) 用户认证 auth模块 1 .authenticate() 2 .login(HttpRequest, user) 3 .logout(request) ...

  4. B. The Number of Products(Codeforces Round #585 (Div. 2))

    本题地址: https://codeforces.com/contest/1215/problem/B 本场比赛A题题解:https://www.cnblogs.com/liyexin/p/11535 ...

  5. 为什么vue中的data用return返回

    1.为什么在项目中data需要使用return返回数据呢? 不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一 ...

  6. 每天一点点之vue框架开发 - 部署到线上

    1.在项目根目录下运行如下命令 npm run build 会生成一个dist目录, 2.然后将dist目录上传至服务器就可以访问页面了,不需要配置vue环境了.

  7. 使用Redis SortedSet实现增量更新

    导读:前段时间有个需求是提供一个接口供客户端增量更新数据,当有数据被删除了以后客户端也需要感知到,并且要支持一定并发: 关键词:高并发,增量更新 前言 何谓增量更新,顾名思义就是只更新变化的部分,这样 ...

  8. python运算表达式

    运算符1.算术运算符:+,-,*,/,//(求整商),%,**(求多次方,左边为数,右边为多少次方)2.关系运算符:>,<,==,<=,>=,!=3.测试运算:in,not i ...

  9. 高分Essay写作需注意以下几个细节

    目前为止,已经有很多同学问我这个了,所以这次专门来讨论下这个问题.英语essay能达到预期分数吗,答案是肯定的,甚至会超出预期,但是必须注意到几方面,越是细节问题,越容易导致丢分,所以请重视-! 一. ...

  10. java伪代码 (第一章)

    在<大道至简>第一章中,周爱民先生引用一则<愚公移山>的寓言,引出了编程的根本:顺序.选择.循环.汤问篇中所述的愚公移山这一事件,我们看到了原始需求的产生---“惩山北之塞,出 ...