Bootstrap学习之浅析模态框的使用方法

1. Bootstrap模态框简介

Bootstrap是一种基于HTML、CSS、JavaScript的前端开发框架，可以帮助开发者快速搭建网站和应用，提高开发效率。Bootstrap提供了众多的组件和工具，包括模态框（Modal），用于在网页中弹出对话框。

模态框是一种覆盖在页面上方的对话框，阻止用户与下面的页面进行交互，直到对话框被关闭或完成了所需的操作。

2. Bootstrap模态框的基本用法

2.1 模态框的HTML

Bootstrap模态框的HTML代码包含在一个<div>标签下，需要添加以下几个属性：

class：设置为“modal”，表示这是一个模态框。

id：为模态框设置一个ID，用于JS代码中操作模态框。

tabindex：设置为“-1”，表示无法通过键盘Tab键进入模态框外的元素，保证模态框是焦点。

role：设置为“dialog”，表示这是一个会话框。

aria-labelledby：与模态框标题的ID关联，用于辅助技术识别模态框。

模态框还需要添加两个子元素：头部和主体。头部包含了一个关闭按钮和标题，主体包含了模态框的内容。

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>模态框内容</p>
            </div>
        </div>
    </div>
</div>

2.2 模态框的触发方式

模态框可以通过多种方式触发：

链接：通过设置链接的href属性为模态框的ID，点击链接时触发模态框。

按钮：通过设置按钮的data-toggle和data-target属性为“modal”和模态框的ID，点击按钮时触发模态框。

JS代码：通过JS代码，在按钮点击或页面加载时，手动调用模态框的show()方法触发模态框。

以下是通过按钮触发模态框：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

2.3 模态框的关闭方式

模态框可以通过多种方式关闭：

关闭按钮：通过添加一个class为“close”的按钮在模态框的头部右侧，点击按钮时关闭模态框。

点击模态框外：默认情况下，点击模态框外的区域，模态框会关闭。

ESC键：按下ESC键关闭模态框。

JS代码：通过JS代码，在按钮点击时，手动调用模态框的hide()方法关闭模态框。

以下是一个模态框的完整示例：

<!--触发模态框的按钮-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>
<!-- 模态框 -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>模态框内容</p>
            </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>
<!-- 引入Bootstrap.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.10.2/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

3. Bootstrap模态框的高级用法

除了基本用法外，Bootstrap模态框还有许多高级用法。

3.1 模态框的大小

通过在模态框外层<div>标签上添加class为“modal-sm”、“modal-lg”和“modal-xl”可以设置模态框的大小。默认为中等大小的模态框。

<div class="modal-dialog modal-sm">
    ...
</div>
<div class="modal-dialog modal-lg">
    ...
</div>
<div class="modal-dialog modal-xl">
    ...
</div>

3.2 模态框的滚动条

当模态框中的内容超出模态框的高度时，可以设置模态框的主体部分出现滚动条，而不是覆盖在模态框外面。

通过在模态框主体的<div>标签上添加class为“modal-body overflow-auto”来实现这个效果。这个class只会为上下滚动条创建空间，当内容可以适应窗口大小时，不会出现滚动条。

<div class="modal-body overflow-auto">
    <!-- 长内容 -->
</div>

3.3 模态框的遮罩层

默认情况下，当模态框弹出时，会覆盖在整个网页上方，其他网页元素无法被点击。如果需要做到“模态框之外可以点击，但不响应点击动作”这种效果，需要对遮罩层进行定制。

遮罩层的HTML代码为：

<div class="modal-backdrop"></div>

遮罩层本质上是一个带有背景色和半透明的元素。可以通过改变CSS样式来定制遮罩层。

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

3.4 模态框的远程数据

Bootstrap模态框可以通过AJAX加载数据，需要使用jQuery的load()方法。load()方法可以将服务器返回的HTML代码插入到指定元素中，这意味着我们可以将由服务器生成的HTML代码插入模态框中。以下是一个获取服务器上data.html文件中的内容然后加载到模态框的示例：

<!--链接触发模态框-->
<a href="#" data-toggle="modal" data-target="#myModal">打开模态框</a>
<!--模态框的HTML-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title" id="myModalLabel">远程数据的标题</h4>
            </div>
            <div class="modal-body">
                <p>远程数据的内容将在这里展示.</p>
            </div>
        </div>
    </div>
</div>
<!--JavaScript代码-->
<script>
    $(function(){
        $('#myModal').on('show.bs.modal', function (event) {
            var modal = $(this);
            modal.find('.modal-body').load('data.html');
        });
    });
</script>

3.5 模态框的回调函数

Bootstrap模态框提供了许多可供使用的回调函数，用于监听模态框弹出/隐藏事件、用户操作事件等。

以下是一些常用的回调函数：

show.bs.modal：当模态框即将展示时触发，可以在此事件中进行一些操作。

shown.bs.modal：当模态框完全展示后触发，可以在此事件中进行一些操作。

hide.bs.modal：当模态框即将隐藏时触发，可以在此事件中进行一些操作。

hidden.bs.modal：当模态框完全隐藏后触发，可以在此事件中进行一些操作。

keydown.dismiss.bs.modal：当用户按下ESC键关闭模态框时触发，可以在此事件中进行一些操作。

示例代码：

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('模态框已展示');
})

4. 总结

Bootstrap模态框是网页设计中常见的一种弹出对话框，可以通过代码轻松地实现弹出框对话框和AJAX远程数据加载等功能。开发者可以根据实际需要选择适当的方法使用模态框。同时，回调函数的使用也为开发者提供了更加灵活的操作方式。