毕设中巩固的技术（三）Bootstrap常用组件之二

我不是女神ヾ 2022-08-24 06:07 90阅读 0赞

在[毕设中巩固的技术（二）][Link 1]中，我改写了一个导航栏里的搜索框，然后使用popover组件实现了一个购物车。

下一部分，我会写一下一个最常用的组件——模态框。PS：Bootstrap这两天发了新版本，所以我下面的内容也都是新版本的模态框，有些也是现学现卖了。

## 3、模态框 ##

### 3.1 模态框的基本结构 ###

这是一个基本的模态框的结构：

<div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body…</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>
      </div>
    </div>

下面我们来看看这个基本结构的各个div具体代表了什么

### 3.2 结构分析 ###

<table> 
 <tbody> 
  <tr> 
   <td>&lt;div class="modal fade"&gt;</td> 
   <td>这是一个和你浏览器的可视口一样大小的类似于背景一样的一层，主要目的是1、为了封锁住原来页面body的滚动条（为body添加了一个modal-open的class）2、添加模态框自己的滚动条</td> 
  </tr> 
  <tr> 
   <td>&lt;div class="modal-dialog"&gt;</td> 
   <td>这是模态框的窗口，可以在这里改变模态框的大小</td> 
  </tr> 
  <tr> 
   <td>&lt;div class="modal-content"&gt;</td> 
   <td>这里显示模态框的主要内容，通过三个子div：modal-header、modal-body、modal-footer来设置内容的头、身体和脚。</td> 
  </tr> 
 </tbody> 
</table>

另外还有几点说明：

1、打开模态框的时候，其实我们还会看到一个遮罩层，这是通过添加了<div class="modal-backdrop fade in"></div>这个来实现的

2、我们可以很容易的改变模态框的样式

### 3.3 具体用法 ###

Next，我们来介绍一下模态框的用法，这里说明一下，我一般很少使用Bootstrap提供的标签，而是通过js来调用。

仅仅只需一行JS代码，就可以通过元素的id myModal 调用模态框：

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

下面附上官网最新提供的参数：

<table style="border-spacing:0px; border-collapse:collapse; max-width:100%; margin-bottom:20px; border:1px solid rgb(221,221,221); color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,'Microsoft Yahei','Hiragino Sans GB','WenQuanYi Micro Hei',sans-serif; font-size:14px; line-height:20px"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:8px; line-height:1.42857143; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:60px"> 名称</th> 
   <th style="padding:8px; line-height:1.42857143; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:100px"> 类型</th> 
   <th style="padding:8px; line-height:1.42857143; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221); width:60px"> 默认值</th> 
   <th style="padding:8px; line-height:1.42857143; vertical-align:bottom; border-width:0px 1px 2px; border-bottom-style:solid; border-bottom-color:rgb(221,221,221); border-right-style:solid; border-left-style:solid; border-right-color:rgb(221,221,221); border-left-color:rgb(221,221,221)"> 描述</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> backdrop</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> boolean 或 字符串<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); background-color:rgb(249,242,244)">'static'</code></td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> true</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 使用modal-backdrop，若为static，当点击模态框外的时候不会关闭模态框。.</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> keyboard</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> boolean</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> true</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> 键盘上的 esc 键被按下时关闭模态框。</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> show</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> boolean</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> true</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 模态框初始化之后就立即显示出来。</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> remote</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> path</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> false</td> 
   <td style="padding:8px; line-height:1.42857143; vertical-align:top; border:1px solid rgb(221,221,221)"> <p style="margin-top:0px; margin-bottom:10px">如果提供的是 URL，将利用 jQuery 的&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); background-color:rgb(249,242,244)">load</code>&nbsp;方法<span style="font-weight:700">从此 URL 地址加载要展示的内容（只加载一次）</span>并插入&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); background-color:rgb(249,242,244)">.modal-content</code>&nbsp;内。如果使用的是 data 属性 API，还可以利用&nbsp;<code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:2px 4px; color:rgb(199,37,78); background-color:rgb(249,242,244)">href</code>&nbsp;属性指定内容来源地址。下面是一个实例：</p> 
    <div style="position:relative"> 
     <span style="position:absolute; top:0px; right:0px; z-index:10; display:block; padding:5px 8px; color:rgb(119,119,119); border:1px solid rgb(225,225,232)">Copy</span> 
    </div> 
    <div style="padding:9px 14px; margin-bottom:14px; background-color:rgb(247,247,249); border:1px solid rgb(225,225,232)"> 
     <pre style="overflow:auto; font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:0px; margin-top:0px; margin-bottom:0px; line-height:1.42857143; word-break:normal; word-wrap:break-word; background-color:transparent; border:0px; white-space:normal"><code style="font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:undefined; padding:0px 45px 0px 0px; background-color:transparent; white-space:pre-wrap; display:inline-block"><span style="color:rgb(47,111,159)">&lt;a</span> <span style="color:rgb(79,159,207)">data-toggle=</span><span style="color:rgb(212,73,80)">"modal"</span> <span style="color:rgb(79,159,207)">href=</span><span style="color:rgb(212,73,80)">"remote.html"</span> <span style="color:rgb(79,159,207)">data-target=</span><span style="color:rgb(212,73,80)">"#modal"</span><span style="color:rgb(47,111,159)">&gt;</span>Click me<span style="color:rgb(47,111,159)">&lt;/a&gt;</span>
</code></pre> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这几个新提供的属性里，remote算是比较有用的。之前没有这个属性的时候，要实现动态加载的话可以这么来做：

1、写个基本的模态框  
2、在按钮上注册click事件  
3、click事件触发的同时调用load方法往.modal-content里塞数据  
4、最后在load方法的回调里把模态框显示出来。

现在的话，只需要在remote里设好要加载内容的地址就可以了。

比如我们可以这么来设置一个模态框：

$('#myModal').modal({
      keyboard: false,
      show: false,
      remote: "test.do?method=getDynamicContent"
    });

然后在需要打开这个模态框的按钮上注册一个click事件

$("#myButton").click(function(){
        $('#myModal').modal('show')
    });

模态框的关闭其实一般不需要手动指定，模态框右上角的的“X” 就可以关闭模态框。另外，若没有指定backdrop属性为static，那么只要单击模态框以外的部分也可以关闭模态框。

### 3.4 事件 ###

最后，来介绍一下有关模态框的一些事件：

这里官方文档写的还比较清楚，那么就不再详细介绍了。比如我们希望在关闭模态框后刷新原有的页面，则可以注册hidden.bs.modal事件：

$('#myModal').on('hidden.bs.modal', function (e) {
      window.location.reload(true);
    })