解决bootstrap两层模态框隐藏时的滚动异常

现象:
两层模态框,在上层模态框隐藏后,底层模态框无法滚动
?
原因:
模态框在打开的时候,会隐藏掉父标签的滚动条,关闭的时候会恢复回去,把滚动条加到父标签,所以,有两层模态框的时候,上层关闭时,一般会把滚动条加回body,导致底层模态框无法滚动
?
解决办法:
在顶层模态框隐藏时,继续隐藏body的滚动条
?
代码:

$("#frontModal").on("hidden.bs.modal",function(){
    $(‘body‘).addClass(‘modal-open‘)
})

原文地址:https://blog.51cto.com/4988084/2441819

时间: 2024-07-31 17:48:54

解决bootstrap两层模态框隐藏时的滚动异常的相关文章

Bootstrap Modals(模态框)

http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 在本教程中,将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口.同时,我们也会讨论用于定制的各种可用选项.

Bootstrap学习笔记-模态框

简介 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集,参考modal. 用法 HTML结构 div[class=modal[fade]][id] div[class=modal-dialog[modal-lg|modal-md|modal-sm]] div[class=modal-content] div[class=modal-header] h1/h2/h3/h4/h5/h6[class=modal-title] div[class=modal-body] di

elementUI 下拉框隐藏时触发相关事件(下拉框下拉显示时不触发)

原文:https://blog.csdn.net/CarryBest/article/details/79959389 今天做项目时,用elementUI框架,需要下拉框隐藏时出发某个函数,用了visible-change这个函数,发现点击时会触发两次我自己定义的函数,看了下官网的解释 :下拉框出现/隐藏时触发   如果只想在下拉框隐藏时触发该怎么做呢?下面是解决办法:官网定义:Select Events @visible-change 函数里面传递两个参数(第一个为回调参数,第二个为自己定义的

bootstrap select2使用模态框,搜索框无法输入问题解决

使用模态框,一般都会自动带上一个属性,tabindex="-1",因为这个属性的存在,导致select2的搜索框无法输入,去掉这个属性即可解决 html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序. 把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中. 原文地址:bootstrap select2使用模态框,搜索框无法输入问题解决标签:bootstrap   select2 智能推荐 In MySQL, a

bootstrap下使用模态框,在模态框内输入框中回车时,模态框自动关闭的问题及解决方法

使用bootstrap下模态框,构建表单提交页面,但是输入框中直接回车,本来是想执行一下验证,但是却导致模态框自动关闭了. 遇到这样的问题,只需要先禁止回车触发表单提交            $(document).keydown(function(event){                   if (event.keyCode == 13) {                         $('form').each(function() {                     

为Bootstrap Modal(模态框)全局添加拖拽操作

在js中绑定方法 $(document).on("show.bs.modal", ".modal", function(){ $(this).draggable({ // handle: ".modal-header" // 只能点击头部拖动 }); $(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的 }); 事件 描述 示例 sh

bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】

http://bbs.csdn.net/topics/391917552 具体如下:   $(function () {         var _$modal = $('#MyModal');         _$modal.css('display', 'block');         _$modal.addClass("webuploader-element-invisible");         var uploader = WebUploader.create(...);

小程序实现弹出遮罩层模态框

<view bindtap='showRule'>点击弹出模态框</view> <!--遮罩层--> <view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}"> <view class='ruleZhezhaoContent'> <image src='/images/zijia.png' class="select">

Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条

Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px;(设置15px是因为浏览器的滚动条占位是15px);(通过在modal显示时给body添加.modal-open类实现) 设置modal -- overflow:auto;overflow-y:scroll; 这样设置的效果是: (1)当页面内容超出(即页面本身存在滚动条),则moda弹出后,原bo