Bootstrap 模态框（Modal）插件

Bootstrap 模态框（Modal）

Bootstrap 模态框（Modal）插件是一个快速创建弹出窗口的工具，它可以用于展示一些重要的信息、数据、表格，也可以用于登录、注册、修改密码等操作。

使用方法

引入JavaScript文件

Bootstrap 模态框（Modal）需要引入bootstrap.min.js 文件，可以使用以下代码进行引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

创建模态框的HTML结构

使用Bootstrap 模态框（Modal）需要包含以下结构：

.modal：模态框主体
.modal-dialog：模态框对话框
.modal-content：模态框主体内容
.modal-header：模态框头部
.modal-body：模态框主体
.modal-footer：模态框底部

以下是示例代码：

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        <p>模态框主体内容</p>
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

触发模态框

通过 JavaScript，我们可以触发模态框的展示。

下面是一个按钮，通过点击该按钮来触发模态框的展示：

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

调用javascript弹出模态框

可以使用以下代码弹出模态框：

$("#myModal").modal();

参数说明

Bootstrap模态框（Modal）提供了一些参数可供设置，下面是一些可配置的参数：

参数	类型	默认值	描述
backdrop	boolean	true	在模态框外部点击时是否关闭模态框。
keyboard	boolean	true	当按下 ESC 键时是否关闭模态框。
focus	boolean	true	当模态框展示时，是否自动 focus 到模态框上。
show	boolean	true	是否在模态框初始化时显示模态框。
remote	string	null	如果要使用远程 URL 获取模态框，则在此处提供 URL。
backdrop	string	fade	在模态框展示或关闭时，背景颜色的变化效果。
keyboard	function()	function(){}	如果按下 ESC 键关闭模态框时，执行的回调函数。
show	function()	function(){}	在模态框展示时，执行的回调函数。
shown	function()	function(){}	在模态框展示完成后，执行的回调函数。
hide	function()	function(modal){}	在模态框关闭时，执行的回调函数。
hidden	function()	function(modal){}	在模态框关闭后，执行的回调函数。
remote	function()	function(event){}	获取远程 URL 内容时，调用的函数。

结语

Bootstrap模态框（Modal）是一个快速、方便的工具，用于创建弹出窗口。通过正确的配置和使用，可以很方便的让我们实现各种功能，提升用户体验，美化应用界面。

Bootstrap 标签页（Tab）插件 Bootstrap 滚动监听（Scrollspy）插件