Bootstrap - Modal 插件

最新推荐文章于 2021-12-17 13:57:01 发布

Tryking

最新推荐文章于 2021-12-17 13:57:01 发布

阅读量300

点赞数

本文链接：https://blog.youkuaiyun.com/sinat_18268881/article/details/101694740

版权

本文介绍了如何利用Bootstrap的Modal插件创建弹出对话框。通过引入js文件，设置Trigger和Modal部分，以及Modal内容，可以实现点击按钮弹出Modal。此外，还讲解了如何更改Modal的大小，如small和large。对于网页开发者来说，Bootstrap Modal是一个快速构建交互式弹窗的实用工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们可能需要在页面弹出一个对话框，或者传统的叫做 Popup Window 的东西。其实 Bootstrap 给我们提供了一个插件，可以非常方便的构造这几种东西，这个插件叫做 Modal。

引入 js 文件

Bootstrap 的插件有很多都是独立成型的，并不需要依赖 Bootstrap 的所有 js 文件。想要使用 Modal 插件，我们既可以只引用单独的 modal.js 文件，还可以引包含 Bootstrap 的大部分内容的 js 文件 bootstrap.js 或 bootstrap.min.js。比如这里，我们直接引用 CDN，使用 bootstrap.min.js 文件。

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

创建一个 Modal

下面我们创建一个 Modal，点击页面按钮直接跳出一个 Modal:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

你可以在 W3C 提供的工具上进行尝试。

Trigger 部分

在 Trigger 部分，我们使用了一个 “Open Modal” 的按钮来触发一个 Modal，在此按钮中需要加入两个 data-* 属性：

data-toggle="modal" 表明我们需要让其打开一个 modal。
data-target="#myModal" 指向我们定义 modal 的 id。

Modal 部分

在 Modal 部分，在最外层的 <div> 部分，我们必须定义一个和在 Trigger 部分一样的 id，以让按钮能定位到此 Modal。
.modal 类将 <div> 的内容标识为 modal。
.fade 类会增加一个 modal 弹出及消失的渐变效果，如果不需要可以将此类去掉。
role="dialog" 属性可以方便使用屏幕阅读器的人进行访问。
.modal-dialog 类设置了此 modal 适当的宽度和页面边的 margin。

Modal content 部分

拥有class="modal-content" 的 <div> 定义了 modal 的样式（比如 border, background-color 等）。在此 <div> 中可以添加 modal 的 header, body 以及 footer 内容。
.modal-header 类用于定义 modal 的 header 的样式。header 中有一个属性为 data-dismiss="modal" 的 <button>，点击它可以将 modal 关闭。.close 类定义了关闭按钮的样式。.modal-title 类以一个合适的行高定义了 header 的样式。
.modal-body 类用于定义 modal body 的样式。在这里面可以添加任何的 HTML 标记来生成 modal 的主体内容，比如你可以使用 paragraphs, images, videos 等。
.modal-footer 类用于定义 modal footer 的样式。默认情况下，此区域会右对齐。