Bootstrap 3 教程 82 模态窗口使用指南

Bootstrap 3 是一个广泛使用的前端开发框架，它简化了网页设计和响应式布局的实现。在 Bootstrap 3 中，模态窗口（Modals） 是一个非常重要的组件，允许开发者创建弹出窗口，通常用于显示详细信息、对话框或者表单提交等交互。

本教程将深入探讨如何使用 Bootstrap 3 来创建和定制模态窗口。模态是通过 JavaScript 插件 驱动的，结构通常包含两个部分：.modal 容器和 .modal-dialog。.modal 元素是整个模态的容器，而 .modal-dialog 定义模态的外观和位置。在 .modal-dialog 内部，.modal-content 包含了模态的头部、主体和尾部。

代码示例：

我们需要在 HTML 中定义一个隐藏的模态元素，并使用 .modal 类添加 .fade 类以实现淡入淡出效果：

<div class="modal fade" id="myModal">

  <div class="modal-dialog">

    <div class="modal-content">

      

      <div class="modal-header">

        <button class="close" data-dismiss="modal" type="button">×button>

        <h4 class="modal-title">Modal Titleh4>

      div>

      

      <div class="modal-body">

        <p>Modal body text goes here.p>

      div>

      

      <div class="modal-footer">

        <button class="btn btn-default" data-dismiss="modal" type="button">Closebutton>

        <button class="btn btn-primary" type="button">Save changesbutton>

      div>

    div>

  div>

div>

触发模态的按钮代码：

触发模态显示的按钮通常会有 data-toggle="modal" 和 data-target="#myModal" 属性，其中的 "#myModal" 应与模态的 ID 相匹配：

<button class="btn btn-primary" data-target="#myModal" data-toggle="modal" type="button"> Launch modal button>

其他功能：

• 模态的大小：可以通过 .modal-lg 和 .modal-sm 类控制模态的尺寸。

• 事件：如 show.bs.modal 和 hide.bs.modal，可以在模态显示或隐藏时执行自定义的 JavaScript 代码。

• 动态加载内容：通过 remote 属性从另一个 URL 动态加载模态内容。

• 键盘交互：可以通过设置 keyboard 选项来禁用 Esc 键关闭模态的功能。

• 自定义样式：可以通过 CSS 个性化设置模态的外观和动画效果。