Bootstrap模态框的使用

最新推荐文章于 2026-05-03 09:48:54 发布

原创最新推荐文章于 2026-05-03 09:48:54 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #js #css

前端知识点专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Bootstrap创建模态框，并提供了模态框的基本结构和两种触发方式。此外，还介绍了模态框提供的四个钩子函数及其使用方法。

模态框

https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。与我们所熟知的dialog有所等同。

创建模态框

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
				<!--这是模态框的头部，添加这个模态框的名字-->
            </div>
            <div class="modal-body">
                <!--这是模态框的body部分，可以添加文字或者from表单-->
            </div>
            <div class="modal-footer">
                <!--这是模态框的底部，是提交和返回按钮的存放地-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

使用模态框

1.通过data属性

在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

2. 通过js调用

使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：

$('#identifier').modal(options)

简单实例

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">按下 ESC 按钮退出。</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><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

事件

模态框给我们设置了4个钩子函数：

show.bs.modal:在调用 show 方法后触发
shown.bs.modal:当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
hide.bs.modal:当调用 hide 实例方法时触发。
hidden.bs.modal:当模态框完全对用户隐藏时触发。

使用方法

$('#identifier').on(钩子函数名称, function () {
  // 执行一些动作...
})