Bootstrap基本插件学习笔记之模态对话框(16)

什么是模态对话框？

模态对话框（Modal）是一个会阻止用户输入的对话框，通常用于展示用户必须操作或者必须知道的信息。当出现模态对话框时，用户必须先完成对话框中的操作才能继续其他操作。

Bootstrap的模态对话框

Bootstrap的模态对话框是一种轻量级的、模态的（即阻止用户进行其他操作）对话框，它是通过 JavaScript 和 CSS 实现的。使用 Bootstrap 的模态对话框，你可以轻松地在你的网页中创建各种对话框以展示内容或收集信息。

模态对话框的启动方式

Bootstrap中，使用模态对话框有两种启动方式：

• 通过data-toggle和data-target属性来开启模态对话框：

html
<a href="#" data-toggle="modal" data-target="#myModal">启动模态对话框</a>

• 通过JavaScript代码来开启模态对话框：

javascript
$('#myModal').modal('show')

模态对话框的基本结构

<!-- 模态对话框主体 -->
<div class="modal fade" 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-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>

    </div>
  </div>
</div>

其中，id属性必须全局唯一，用于控制模态对话框的展示和隐藏。其他的结构都可以根据需要进行添加或删除。

模态对话框的选项

Bootstrap的模态对话框还提供了很多有用的选项，可以通过JavaScript代码进行设置。

$('#myModal').modal({
  backdrop: true,
  keyboard: true,
  focus: true,
  show: true
})

其中，常用的选项包括：

• backdrop - 是否在模态对话框外部点击时隐藏模态对话框，默认值为 true；
• keyboard - 是否允许使用键盘上的 ESC 键来关闭模态对话框，默认值为 true；
• focus - 是否在模态对话框弹出时自动聚焦到对话框上，默认值为 true；
• show - 是否在页面加载时自动显示模态对话框，默认值为 false。

模态对话框的示例

示例1：基本的模态对话框

<!-- 模态对话框主体 -->
<div class="modal fade" id="myModal1">
  <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-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>

    </div>
  </div>
</div>

<!-- 启动模态对话框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">打开模态对话框</button>

示例2：带有表单的模态对话框

<!-- 模态对话框主体 -->
<div class="modal fade" id="myModal2">
  <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">
        <form>
          <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" id="username" name="username">
          </div>
          <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password" name="password">
          </div>
        </form>
      </div>

      <!-- 模态对话框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">提交</button>
      </div>

    </div>
  </div>
</div>

<!-- 启动模态对话框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">打开模态对话框</button>

在这个示例中，我们在模态对话框的主体中添加了一个表单，用户可以在表单中输入用户名和密码。当用户点击“提交”按钮时，表单数据将被提交到服务器上。