【bootstrap】modal模态框的几种打开方法+问题集锦

简介: 第一部分:  关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来  首先呢,得有个Bootstrap的页面,这里就不说了。  其次呢,得有个modal放在页面中,不管你这段代码加在页面代码的什么地方,默认是不会显示出来的  ...

第一部分:

  关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来

  首先呢,得有个Bootstrap的页面,这里就不说了。

  其次呢,得有个modal放在页面中,不管你这段代码加在页面代码的什么地方,默认是不会显示出来的 

 <div class="modal fade modalIndex" id="adminModal"  role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">机构筛选</h4>
                    </div>
                    <div class="modal-body">
                        机构信息

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">确认</button>
                    </div>
                </div>
            </div>
        </div>
View Code

  最后呢,就是下面的几种打开方式:

  第一种打开方式:

  在某个绑定的元素上添加下面两个属性【例如在button或者a标签上】

<a data-toggle="modal" data-target="#adminModal">机构</a>

  只要target指向的id正确,就可以成功打开modal框。

 

  第二种打开方式:

  给某个绑定的元素添加class,【l例如在button或者a标签上】

<a class="adminA">机构</a>

  然后写js为它添加点击事件:

$(".adminA").click(function(){
        $('#adminModal').modal("show");
    });

 

第二部分:

  使用过程中出现的一些问题集锦

  问题1:打开的Modal模态框位于页面上图层div的下面

  解决方法:

  为Modal指定z-index,即可解决

.modalIndex{
            z-index: 999;
}

  然后为modal加上这个class即可。

 =======================================================

  问题2:

    怎么关闭modal?

  解决方法:

$('#adminModal').modal('hide');

=======================================================

    

相关文章
N..
|
7月前
|
开发框架 前端开发 JavaScript
Bootstrap模态框
Bootstrap模态框
N..
64 1
Bootstrap5 模态框3
通过添加不同的类,如 `.modal-fullscreen` 可实现模态框全屏显示,`.modal-fullscreen-*-*` 控制特定尺寸下的全屏显示,`.modal-dialog-centered` 实现模态框居中,以及 `.modal-dialog-scrollable` 使模态框内部内容可滚动。
Bootstrap5 模态框2
通过在模态框的 `&lt;div&gt;` 元素中添加 `.fade` 类,可以实现模态框弹出和关闭时的淡入淡出动画效果。此外,通过添加 `.modal-sm`、`.modal-lg` 和 `.modal-xl` 类,可以调整模态框的大小,分别创建小、大和超大的模态框。
Bootstrap5 模态框1
Bootstrap5 模态框是一种覆盖在当前页面上的对话框,用于展示信息或进行用户交互。通过按钮触发,模态框包含标题、内容和底部操作区,实现页面内交互而不跳转。示例代码展示了如何使用 Bootstrap5 创建一个基本的模态框。
|
7月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
7月前
|
前端开发 数据库
R语言基于Bootstrap的线性回归预测置信区间估计方法分析汽车制动距离|数据分享
R语言基于Bootstrap的线性回归预测置信区间估计方法分析汽车制动距离|数据分享
|
7月前
|
前端开发
R语言实现随机前沿分析SFA、数据包络分析DEA、自由处置包分析FDH和BOOTSTRAP方法
R语言实现随机前沿分析SFA、数据包络分析DEA、自由处置包分析FDH和BOOTSTRAP方法
|
7月前
|
前端开发 数据库
R语言基于Bootstrap的线性回归预测置信区间估计方法
R语言基于Bootstrap的线性回归预测置信区间估计方法
|
前端开发 JavaScript
|
前端开发 CDN
前端:Bootstrap 模态框
前端:Bootstrap 模态框
103 0
前端:Bootstrap 模态框