关于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 相关文章推荐
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
JS鼠标滚动分页效果示例
Jul 05 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
JavaScript交换两个变量方法实例
Nov 25 Javascript
JS实现音量控制拖动
Jan 15 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 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编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
python内存管理分析
2015/04/08 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
翻译专业应届生求职信
2013/11/23 职场文书
水果超市创业计划书
2014/01/27 职场文书
医学生求职信
2014/07/01 职场文书
创先争优活动承诺书
2014/08/30 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
学术会议邀请函
2015/01/30 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript