关于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之旅 对象的原型链之由来
Aug 25 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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页面实现定时跳转的方法
2014/10/31 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
解析Python的缩进规则的使用
2019/01/16 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
详解Python多线程下的list
2020/07/03 Python
python如何建立全零数组
2020/07/19 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
承办会议欢迎词
2014/01/17 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书