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>
iphone对fixed模态框支持不太好,弹出窗口中滚动点击穿透的bug的更多相关文章
- 苹果手机iOS11中fixed弹出框中input光标错位问题
最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- Bootstrap 模态框(也可以说的弹出层)
最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...
- div样式position:fixed,不随屏幕滚动而滚动,导致屏幕太小时弹出层被遮挡,无法滚动查看的解决办法
window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...
- IOS中position:fixed弹出框中的input出现光标错位的问题
解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...
- iphone弹出窗口效果的制作(Core animation, CALayer)
效果类似人人网微薄客户端的弹出效果 static CGFloat kTransitionDuration = 0.3; - (void)initView { UIWindow *window = [U ...
- centos 7 下vnc弹出窗口太小解决方法
使用以下参数启动 : vncserver :2 -geometry 800x600
- iOS:模态弹出窗控制器UIPopoverPresentationController
模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...
- 弹出视图/弹出模态presentViewController与presentModalViewController
一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...
随机推荐
- 一百一十三、SAP的SCAT录屏操作,类似按键精灵可用于批量修改数据
一.输入事务代码SCAT,输入Z开头的程序名,点击左上角的新建图标 二.输入标题和模块名 三.保存为本地对象 四.包属性修改为CATT,然后保存 五.可以看到我们新建的一条内容,点击小铅笔修改 六.点 ...
- 如何让手游更省带宽,耗电量更少?TBR渲染架构解析!
如何让手游更省带宽,耗电量更少?渲染或是其中一个可突破的点.本文中,腾讯游戏学院专家Hailong将从为大家解析TBR渲染架构的特点. 什么是TBR? 全称是Tile Based Rendering, ...
- 给element的confirm加自定义指令
问题描述,因为自定义指令一般直接加在页面html标签上,但是element封装好的confirm的确认按钮没法添加自定义指令,如图: 解决办法:加个其他的隐藏标签,监听撤销事件,让其他的标签自动触发c ...
- C#获取刚插入的数据的id
在开发程序中我们经常会遇到两个表或多个表关联同时插入数据的需求. 那么我们刚给主表插入一条数据,接着给副表插入数据时其中一个字段要存储与主表关联的id,那么我们该怎么获取刚插入的那条数据的id呢? ...
- NIO前奏之Path、Files、AsynchronousFileChannel
NIO前奏之Path.Files.AsynchronousFileChannel Java 1.4加入了nio包,Java 1.7 加入了真正的AIO(异步IO),AsynchronousFile ...
- java虚拟机之JVM体系结构
JVM体系结构: 下面重点介绍运行时数据区域模块: (1)java堆(Heap) 被所有线程共享的一块内存区域,在虚拟机启动时创建 用来存储对象实例 可以通过-Xmx和-Xms控制堆的大小 OutOf ...
- s5pc100开发板linux内核移植
相关软件下载地址:http://pan.baidu.com/s/16yo8Y 应用于FSC100开发板 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc linux-2.6 ...
- x++ 与 ++x的区别
相信在很多编程语言中都会遇见这个问题,这对于刚入编程的人来说可能是相当懵逼了. 老师的官方说法是:操作符在前面先进行自身运算,再进行其他运算:操作符在后面,先进行其他运算再进行自身运算. 反正我这段话 ...
- nginx报错
1. nginx报错 nginx: [error] invalid PID number "" in "/usr/local/nginx/logs/nginx.pid&q ...
- python print %s 号格式化输出
python %号格式化输出: 一种字符串格式化的语法, 基本用法是将值插入到%s占位符的字符串中. %s,表示格式化一个对象为字符 "%±(正负号表示)3(数字表示字符串的长度)s&quo ...