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. react的this.setState详细介绍

    this.setState是react类组件中最常用的一个react API,使用它可以改变state从而改变页面.今天我们就来详细的学习一下这个东西.比如: import React, { Comp ...

  2. Spring-IOC(基于注解)

    1.Spring 的 Bean 管理:(注解方式) 1.1 创建 web 项目,引入 Spring 的开发包: 注:在 Spring 的注解的 AOP 中需要引入 spring-aop 的 jar 包 ...

  3. 吴裕雄--天生自然C++语言学习笔记:C++ 多态

    多态按字面的意思就是多种形态.当类之间存在层次结构,并且类之间是通过继承关联时,就会用到多态. C++ 多态意味着调用成员函数时,会根据调用函数的对象的类型来执行不同的函数. 下面的实例中,基类 Sh ...

  4. springboot - 使用ErrorAttributes 在我们自定义的 ErrorController中

    1.概览 基于<springboot - 映射 /error 到自定义且实现了ErrorController的Controller>改造,仅将MyCustomErrorController ...

  5. HDU 4662 MU Puzzle(找规律)

    题意:问是否能把MI通过以下规则转换成给定的字符串s. 1.使M之后的任何字符串加倍(即,将Mx更改为Mxx). 例如:MIU到MIUIU.2.用U替换任何III.例如:MUIIIU至MUUU.3.去 ...

  6. windows driver 定时器的使用

    #include < Ntifs.h> #pragma warning(disable:4995) #pragma comment(lib, "Ntoskrnl.lib" ...

  7. Spark-大数据计算引擎

    Spark简介: Spark是一个快速且通用的集群计算平台,可以处理大数据量时候,比如几T到几P量级时候只需要几秒钟到几分钟,相对于hadoop几分钟到几小时速度是很快的,通用是指Spark的使用场景 ...

  8. Kubernetes-基于helm安装部署高可用的Redis及其形态探索(二)

    上一章,我们通过实践和其他文章的帮助,在k8s的环境安装了redis-ha,并且对其进行了一些实验来验证他的主从切换是否有效.本篇中将会分析,究竟是如何实现了redis-ha的主从切换,以及其与K8S ...

  9. 洛谷 P1435 回文字串

    题目传送门 解题思路: 就是求一个字符串的最长回文子序列的长度,然后用整个的长度减去最长回文子序列的长度 AC代码: #include<iostream> #include<cstd ...

  10. c++ STD Gems07

    reverse.rotate.permutation #include <iostream> #include <vector> #include <string> ...