关于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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
jquery插件格式实例分析
Jun 16 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
实例解析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读取javascript设置的cookies的代码
2010/04/12 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python如何实现文本转语音
2016/08/08 Python
Django实现学生管理系统
2019/02/26 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
详解python算法常用技巧与内置库
2020/10/17 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
九年级化学教学反思
2014/01/28 职场文书
生物科学专业自荐书
2014/06/20 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015年三万活动总结
2015/03/25 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书