bootstrap 嵌套模态框 二级模态框关闭导致一级模态框滚动条消失

一.问题描述

实际开发中遇到bootstrap嵌套模态框,关闭次模态框后主模态框滚动条消失。

二.解决办法

在主模态框上加属性:(先凑合着用,回头再看看源码)

style="overflow-y: auto;"

问题:在使用Bootstrap时,有时候会用到模态框中再嵌套模态框。这样就会出现一个问题,就是在关闭第二个模态框时,会导致第一个模态框的滚动条消失,这样就会使得屏幕太小而模态框太大看不到底部信息,而没法进行操作。

解决方法:就是在第二个模态框的关闭hide 方法调用之后立即触发的事件中,设置第一个模态框的样式,给其加一个样式:‘overflow-y‘:‘scroll‘。

代码如下: myModalEdit是第二个模态框的id,myModal是第一个模态框的id

$(‘#myModalEdit‘).on(‘hidden.bs.modal‘, function() {

$(‘#myModal‘).css({‘overflow-y‘:‘scroll‘});
});

时间: 2024-12-04 13:00:30

bootstrap 嵌套模态框 二级模态框关闭导致一级模态框滚动条消失的相关文章

bootstrap模态框Esc键不关闭

项目开发时很多时候会需要用到弹出框,而且很多框架都有自己的弹出框,比较现在很流行的bootstrap就有模态框(model). 很多时候这东西用起来非常方便,可以为开发省去很多自己定义的时间!最近项目中也用到了bootstrap,以及它人模态框model.用起来真的很爽,只需要$("#popbox").model("show")即可.但是爽归爽,bug也随之而来了! 原因是我需要在弹出框中定义一些事件和方法以及一些变量!但是,当我点击了某个元素使得某一个变量产生变化

Bootstrap开启模态框后对数据处理(标记模态框的开启与关闭状态)

JS用全局变量标记状态,方法中动态修改全局变量以标记状态是一个重要思想. 需求:组合条件查询数据,查询完之后填充到模态框中,开启模态框,模态框中有组合条件查询,此时查询只需要更新模态框表格数据不需要开启模态框,也就是让模态框开启方法执行一次. (点查询的时候只更新数据不会再次开启模态框) 思想:JS设置一全局变量,在手动开启模态框之后修改全局变量的值,此时调用查询方法不会执行开启模态框方法;在手动关闭的时候将全局变量置为初值,可以在查询的时候再次开启模态框. 模态框的一些重要事件: 下表列出了模

点击自定义下拉框以外的区域关闭下拉框

1.写一个下拉框 html部分: <div class="pull-left service-type mt-36"> <div id="currentService">第一<img style="margin-left: 5px" src="arrow.png"/></div> <ul class="service-option hidden">

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

CSS 可视化设计模型(1)块框(Block boxex)和 行内框(Inline boxes)

包含块(Cotaining Blocks) 在CSS2.1中,很多 box 的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算.一般地,生成的 box 会充当其后代 box 的包含块:我们称盒为其后代"创建"了包含块.说"box的包含块"即是说"box所处的包含块",而不是box所产生的包含块. 每个box会被赋予一个相对于其包含块的位置,但它不会被局限在其包含块内:它有可能溢出. <div> &

多选框向后台传值,多选框的回显,对多选框的各种操作

1.多选框的回显: js:$(     function(){     var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象     var checkArray=${list};//获取多选框需要回显得对应的值集合     console.info("checkArray=",checkArray);     for(var i=0;i<checkArray.lengt

列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value="America">美国</option> <option value="China" selected="selected">中国</option> <option value="India

dialog弹出框 点击周围空白处弹出层不自动消失

dialog.setCanceledOnTouchOutside(false);// 设置点击屏幕Dialog不消失 dialog弹出框 点击周围空白处弹出层不自动消失

jsp下拉框中显示数据库信息&&jsp 下拉框从数据库中如何取值?

jsp下拉框中显示数据库信息 <select> <option value=0>-- 请选择 --</option> <% dao d=new dao();// 这是那个数据库访问的类. List list=d.getData(); for(int i=0;i<list.size();i++) { %> <option value=<%=i+1%>><%=list.get(i)%></option> &l