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等 ...
随机推荐
- TP框架数据模型
1.TP框架的数据模型需要建在Model文件夹下: 1.数据模型 与控制器相似,但是每个数据模型控制一张数据表. 2.数据模型可写可不写,如果不写 则沿用父类数据模型. 2.访问数据库: 1.更改数据 ...
- SLAM的评测工具evo
遇到的问题 今天用orbslam2跑euroc数据集,将结果和真实轨迹用evo测评,发现差别特别大: evo_traj tum data.tum CameraTrajectory.txt --plot ...
- Arduino函数
输入输出函数 pinMode(pin, mode)将数位脚位(digital pin)指定为输入或输出.如:pinMode(7,INPUT); // 将脚位 7 设定为输入模式 digitalWrit ...
- [转]Spark SQL2.X 在100TB上的Adaptive execution(自适应执行)实践
Spark SQL是Apache Spark最广泛使用的一个组件,它提供了非常友好的接口来分布式处理结构化数据,在很多应用领域都有成功的生产实践,但是在超大规模集群和数据集上,Spark SQL仍然遇 ...
- springMvc接收json和返回json对象
导入三个包 页面: function sendJson(){ //请求json响应json $.ajax({ type:"post", url: "${pageConte ...
- POJ 1126:Simply Syntax
Simply Syntax Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5264 Accepted: 2337 Des ...
- 【LeetCode】子集
[问题]给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集).说明:解集不能包含重复的子集. 示例: 输入: nums = [,,] 输出: [ [], [], [], [,,] ...
- 使用软件模拟spi 时序时注意点
软件模拟 spi 时序有以下几个点需要注意: cs 使能后到第一个 sck 边沿需要延时. 最后一个sck 边沿到下一个 cs 需要延时. sck 的高电平和低电平本身需要维持时间. mosi 需要先 ...
- Python 中异常嵌套
在Python中,异常也可以嵌套,当内层代码出现异常时,指定异常类型与实际类型不符时,则向外传,如果与外面的指定类型符合,则异常被处理,直至最外层,运用默认处理方法进行处理,即停止程序,并抛出异常信息 ...
- 2020PHP面试-SQL篇
一.乐观锁和悲观锁 1.悲观锁是指假设并发更新会发生冲突,不管冲突是否会发生,都会使用锁机制. 优点: 完全保证数据安全. 缺点:锁机制会有额外开销,并发度降低. 可能会产生死锁. 2. 乐观锁是指假 ...