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等 ...
随机推荐
- 098-PHP二维数组的元素输出
<?php $stu=array(array(76,87,68), array(65,89,95), array(90,80,66), array(90,95,65)); //定义一个二维数组 ...
- 【CF1154G】Minimum Possible LCM
题意 给你 \(n\) 个数 \(a_i\) ,求出 \(\text{lcm}\) 最小的一对数. \(n\le 10^6, a_i\le 10^7\) 题解 直接枚举 ,找到当前数最小的两个倍数,统 ...
- 十三、react-router 4.x的基本配置
路由的定义及作用 根组件根据客户端不同的请求网址显示时,要卸载上一个组件,再挂载下一个组件,如果手动操作话将是一个巨大麻烦.具体过程如下图: [根组件] ↑ [首页组件] [新闻组件] [商品组件] ...
- spring监听器+定时任务
背景:在原SSM项目中,拟定在每晚的23:59:59执行一个批处理任务. 设计思路:用jdk自带的定时器触发任务执行,设置下次执行间隔为24小时.定时任务由spring的监听器去启动. jdk版本:1 ...
- UVA - 818 Cutting Chains(切断圆环链)(dfs + 二进制法枚举子集)
题意:有n个圆环(n<=15),已知已经扣在一起的圆环,现在需要打开尽量少的圆环,使所有圆环可以组成一条链. 分析:因为不知道要打开哪个环,如果列举所有的可能性,即枚举打开环的所有子集,最多才2 ...
- jQuery琐碎
函数(以click事件为例)在jsp页面和js中的不同写法 onclick="getInfo(this);" function getInfo(obj){ var $this=$( ...
- 【golang】golang的一些知识要点
特殊常量iota: 1.iota的值在遇到const关键字时将被重置为0 2.const中每新增一行常量声明将使iota计数一次,也就是自动加一. 3.iota只能在常量定义中使用. iota常见使用 ...
- PC端页面适应不同的分辨率的方法 (转载)
原文地址:https://blog.csdn.net/fengzhen8023/article/details/81281117 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题 ...
- 【LeetCode】验证二叉搜索树
[问题]给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征:节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是二叉搜 ...
- C++命名规范——谷歌规范
1.文件命名规则 文件名全部小写,可以含下划线或连字符,按项目约定命名,且尽量保证文件名明确.比如: cmd_save_player_info_class.cc ,my_use_full_class. ...