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等 ...
随机推荐
- Vulkan SDK之Vertex Buffer
A vertex buffer is a CPU-visible and GPU-visible buffer that contains the vertex data that describes ...
- 151-PHP nl2br函数(二)
<?php $str="h\nt\nm\nl"; //定义一个多处换行的字串 echo "未处理前的输出形式:<br />{$str}"; $ ...
- ActiveMQ消息队列和SignalR之日志实时监控及警报小实例
主要技术: log4net-生成日志. ActiveMQ-生成日志的时候发送消息,并实时监控日志. SignalR-将ActiveMQ监控的日志实时显示到浏览器上,而不用刷新浏览器. 小实例介绍: 左 ...
- ubuntu12.04 eclipse安装PyDev
在ubuntu软件中心安装的eclipse版本为3.7,install new software时,搜索出来的PyDev版本较高(5.6...): 高版本的PyDev要求较高版本的eclipse.详情 ...
- HDU 4915 多校5 Parenthese sequence
比赛的时候想了一个自认为对的方法,WA到死,然后还一直敲下去,一直到晚上才想到反例 找是否存在解比较好找,这种左右括号序列,把(当成1,把)当成-1,然后从前往后扫,+1或者-1 遇到?就当初(,然后 ...
- php srand()和rand()
1.rand()函数 作用:返回随机整数 用法:rand(min,max) min和max规定随机数产生的范围,可以省略不写,不写时rand() 返回 0 到 RAND_MAX 之间的伪随机整数. ...
- 如何生成 SSH keys, 并在 Github 或 Gitlab 等上添加密钥
1 打开 Git Bash $ 2 输入 dir, 确认当前文件夹,并切换到想存密钥文件即pub文件的路径 $ dir 3 生成 密钥命令 ssh-keygen -t rsa -C "{ y ...
- Day2-T3
原题目 Describe:质数问题 code: #pragma GCC optimize(2) #include<bits/stdc++.h> #define KKK 1200 using ...
- zabbix 日志
/var/log/zabbix/ tail -f /var/log/zabbix/zabbix_server.log tail -f /var/log/zabbix/zabbix_agentd.log
- 算法5:队列——解密 QQ 号
新学期开始了,小哈是小哼的新同桌(小哈是个小美女哦~),小哼向小哈询问 QQ 号,小哈当然不会直接告诉小哼啦,原因嘛你懂的.所以小哈给了小哼一串加密过的数字,同时小哈也告诉了小哼解密规则.规则是这样的 ...