代码复用--Bootstrap模态框

最新推荐文章于 2025-03-20 14:17:49 发布

原创最新推荐文章于 2025-03-20 14:17:49 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #模态框 #modal

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在实际开发中使用Bootstrap模态框modal.js，包括静态和动态实例、JavaScript调用模态框的方式、参数选项以及相关方法。同时强调了在使用过程中要注意的事件功能和可能遇到的问题，如模态框闪退，提醒不要同时引用bootstrap.min.js和modal.js。

在实际开发中，会遇到很多弹出层效果，个人比较推荐Bootstrap的模态框modal.js，样式简洁大方，而且应用灵活。

1.静态实例

复制下面的代码段，即可显示一个静态的模态框，样式如下：
这里写图片描述

<div class="modal fade" tabindex="-1" role="dialog">
  <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">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2.动态实例

点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
该动态方法利用data-target=”#”,data-toggle=”#”
这里写图片描述

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<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" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3.利用Javascript调用模态框

只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：

$('#myModal').modal(options)

参数（options）:
keyboard : 键盘上的 esc 键被按下时关闭模态框。boolean类型，默认值为true;
show : 模态框初始化之后就立即显示出来。boolean类型，默认值为true;
backdrop : 点击模态框周围空白处关闭模态框。boolean 或字符串 ‘static’，默认值为true;
remote：如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例：

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

4.方法

将页面中的某块内容作为模态框激活。接受可选参数 object。

    .modal(options)

可通过某页面id值，触发模态框的显示或隐藏。

.modal('方法名')

方法名：
toggle: 手动打开或关闭模态框。
show: 手动打开模态框。
hide: 手动隐藏模态框。
handleUpdate: 为适应页面大小需求，调整模态框的位置。

5.事件
在实际开发应用中，我们不仅要打开/隐藏模态框，同时还要触发一些事件，比如提示，根据不同功能显示或隐藏不同组件等，Bootstrap为我们提供了强大的事件功能。
注：这是我呕心沥血花了2个小时，才醒悟的道理：为了支持模态框的事件功能，请在body底部，引入bootstrap-modal.js；
但是，我遇到了模态框闪退的问题，网上查询方法是引用过多Js,bootstrap.min.js 和modal.js不应该同时引用，请注意！！各位可以两种方法都试试！
这里写图片描述