关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)


Posted in Javascript onDecember 14, 2016

最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法。在CSS中加入以下代码

CSS

body { 
 padding-right: 0px !important 
} 
.modal-open { 
 overflow-y: auto; 
}

PS:bootstrap datepicker 在bootstrap modal中不显示问题

可以通过在 input 输入框之外 嵌套 <span style="position: relative; z-index: 9999;"> 完美解决问题。

修改前:

<div class="input-group">
  <input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd" name="contract_date" id="contract_date" value="{{ 'now'|date('Y-m-d') }}">
  <span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
</div>

修改后:

<div class="input-group">
  <span style="position: relative; z-index: 9999;">
    <input type="text" class="form-control date-picker" data-date-format="yyyy-mm-dd" name="contract_date" id="contract_date" value="{{ 'now'|date('Y-m-d') }}">
  </span>
  <span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
</div>

以上所述是小编给大家介绍的关于BootStrap modal 在IOS9中不能弹出的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
实例解析angularjs的filter过滤器
Dec 14 #Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 #Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 #Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 #Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 #Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 #Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 #Javascript
You might like
PHP 错误处理机制
2015/07/06 PHP
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
python3.4中清屏的处理方法
2020/07/06 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
社会学专业求职信
2014/07/17 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2014年销售员工作总结
2014/12/01 职场文书
贫困证明书范文
2015/06/16 职场文书
学习委员竞选稿
2015/11/20 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
用python画城市轮播地图
2021/05/28 Python