【modal】单页面多个modal显示隐藏后body穿透问题解决。
2018-02-22 15:45
537 查看
当在一个页面中使用多个modal时,前一个隐藏后,另一个显示出来,可能会发现鼠标滚轮滚动,body随着滚动,而不是modal。
网上的解决办法是给body添加modal-open的class,具体方法做下记录:
具体资料参照modal的事件:
这里不管是使用隐藏还是显示触发事件一定要用带“n”的,就是modal彻底隐藏或打开后,给body添加相应class即可。
网上的解决办法是给body添加modal-open的class,具体方法做下记录:
function modal_handler() { $(document.body).addClass("modal-open"); $(document.body).css('padding-right','15px'); } $('#modal_add').on('shown.bs.modal', function () { modal_handler(); }); $('#modal_add_client').on('shown.bs.modal', function () { modal_handler(); }); $('#modal_repairitem_list').on('shown.bs.modal', function () { modal_handler(); }); $('#modal_repairpart_list').on('shown.bs.modal', function () { modal_handler(); }); $('#modal_add_client').on('hide.bs.modal', function () { getClientOfEnterpriseAfterAddClient(); }); $('#modal_repairitem_list').on('hide.bs.modal', function () { $('#modal_add').modal({ backdrop : "static" }); }); $('#modal_repairpart_list').on('hide.bs.modal', function () { $('#modal_add').modal({ backdrop : "static" }); });
具体资料参照modal的事件:
这里不管是使用隐藏还是显示触发事件一定要用带“n”的,就是modal彻底隐藏或打开后,给body添加相应class即可。
相关文章推荐
- html关于强制显示、隐藏浏览器的滚动条,解决由于高度变化带来的滚动条影响页面宽度的问题
- DuiLib : 解决CListUI先建立,然后隐藏, 需要的时候再显示填充内容时,不显示或显示为灰的问题.
- javascript+Struts2解决退出清空session以后,点击后退按钮显示原页面信息的问题
- 利用ajax在index页面自动执行方法并显示相关内容,在执行相关按钮操作(如登录注册)后返回index页面后ajax不执行,无法显示相关内容的问题解决方法之一
- Free Spider解决中文页面显示问题
- springmvc + freemarker 解决表单提交、页面显示乱码 的问题
- 解决不能显示隐藏文件夹问题
- html网页兼容手机浏览器(解决显示页面很小的问题)
- 解决iframe窗体丢失Session时登录窗口显示在子页面的问题
- 如何解决JSP页面显示乱码问题
- Android完美解决输入框EditText隐藏密码打勾显示密码问题
- magento 后台分类页面catelog,点击后,出现右边信息不同步显示,不显示点击的分类的信息,问题的解决!!!
- Android完美解决输入框EditText隐藏密码打勾显示密码问题
- JBoss 系列八十八: JBoss 安全问题 - 如何隐藏 web 应用出错时页面上显示的 JBoss 信息
- 如何解决JSP页面显示乱码问题
- 页面内容显示不全问题的解决办法
- 解决 ECSHOP v273 产品详情页面评论不显示的问题
- tomcat欢迎页面不能显示问题解决方法
- 安装framework以后出现不能显示aspx页面提示用户名和密码不匹配问题的解决chicken修改
- html显示数据库中的字段内容为sql语句时,出现隐藏了换行等字符的问题解决