关于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笔记 String类replace函数的一些事
Sep 22 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
js实现异步循环实现代码
Feb 16 Javascript
浅析Jquery操作select
Dec 13 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
JavaScript事件循环及宏任务微任务原理解析
Sep 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 图片水印类代码
2012/08/27 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
javascript事件问题
2009/09/05 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python调用cmd命令行制作刷博器
2014/01/13 Python
python网络爬虫采集联想词示例
2014/02/11 Python
Python实现Const详解
2015/01/27 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
PyTorch-GPU加速实例
2020/06/23 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
母亲七十大寿答谢词
2014/01/18 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js