4.1Bootstrap学习js插件篇之模态框

￡神魔★判官ぃ 2022-08-27 03:56 337阅读 0赞

## 前言 ##

### 单个还是全部引入 ###

插件可以单个引入（使用Bootstrap提供的单个`*.js`文件），或一次性全部引入（使用`bootstrap.js`或压缩版的`bootstrap.min.js`）。

#### 不要将两份文件全部引入 ####

`bootstrap.js`和`bootstrap.min.js`同样是包含了所有插件。区别是：一个没有压缩，一个进行了压缩。

#### 插件之间的依赖 ####

某些插件和CSS组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖jQuery（也就是说，jQuery必须在所有插件之前引入页面）。 [`bower.json`][bower.json]文件中列出了所支持的jQuery版本。

### Data属性 ###

你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭data属性API的方式，即解除绑定到文档命名空间上的所有事件 `data-api` 。就像下面这样：

$(document).off('.data-api')

另外，如果是针对某个特定的插件，只需在data-api前面添加那个插件的名称作为命名空间，如下：

$(document).off('.alert.data-api')

### 编程式API ###

我们还提供了所有Bootstrap插件的纯JavaScript API。所有公开的API都是支持单独或链式调用的，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。

$('.btn.danger').button('toggle').addClass('fat')

所有方法都可以接受一个可选的option对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：

$('#myModal').modal()                      // 使用默认值初始化
    $('#myModal').modal({ keyboard: false })   // 初始化。不支持键盘导航
    $('#myModal').modal('show')                // 初始化并立即展示</p>

每个插件还通过 `Constructor` 属性暴露了其自身的构造器函数： `$.fn.popover.Constructor` 。如果你想获取某个插件的实例，可以直接从页面元素内获取： `$('[rel=popover]').data('popover')` 。

### 避免冲突 ###

某些时候可能需要将Bootstrap插件与其他UI框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，你可以通过调用插件的`.noConflict`方法恢复原始值。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
    $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

### 事件 ###

Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词形式，例如，不定式形式的动词（例如`show`）表示其在事件开始时被触发；而过去式动词（例如`shown`）表示其在动作直接完毕之后被触发。

从3.0.0开始，所有的Bootstrap事件都采用了命名空间。

所有以不定式形式的动词命名的事件都提供了`preventDefault`功能。这就赋予你在动作开始执行前将其停止的能力。

$('#myModal').on('show.bs.modal', function (e) { 
      if (!data) return e.preventDefault() // stops modal from being shown
    })

#### 第三方工具库 ####

Bootstrap官方不提供对第三方JavaScript工具库的支持，例如Prototype或jQuery UI。除了`.noConflict`和采用命名空间的事件，还可能会有兼容性方面的问题，这就需要你自己来处理了。你可以在此[邮件列表][Link 1]获取帮助。

## 模态框 ##

## 案例 ##

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

#### 不支持模态框重叠 ####

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

#### 对于移动设备的附加说明 ####

本文档针对移动设备上使用模态框有一些附加说明。请参考[浏览器支持][Link 2]章节。

### 静态案例 ###

以下模态框包含了模态框的头、体和一组在放置于底部的按钮。

代码：

<divclass="modal fade"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h4class="modal-title">Modal title</h4></div><divclass="modal-body"><p>One fine body&hellip;</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div>**</div>**</div>**

首先最外层的是model，然后里面嵌套了一个model-dialog,model-dialog里面又嵌套model-content,当中包含“header”、“title”、"footer"。不过运行程序后，模态框没有显示出来，暂时还没找到原因。

### 动态演示 ###

点击下面的按钮即可通过JavaScript启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">加载模态框</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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>

预览效果：

![Center][]

同样的，不过首先是一个按钮，按钮中添加了两个data属性，要设置data-toggle="modal" data-target="\#myModal"。

然后下面最大的是一个modal，并且给与属性id赋值为上面button中的data-target ，进行交互。

#### 增强模态框的可访问性 ####

请确保为`.modal`添加了`role="dialog"`；`aria-labelledby="myModalLabel"`属性指向模态框标题；`aria-hidden="true"`告诉辅助性工具略过模态框的DOM元素。

另外，你还应该为模态框添加描述性信息。为`.modal`添加`aria-describedby`属性用以指向描述信息。

## 用法 ##

### 通过data属性 ###

不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置`data-toggle="modal"`，并使用`data-target="#foo"`或`href="#foo"`指向特定的模态框即可。

例子就是上面的例子

### 通过JavaScript调用 ###

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

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

![12033216-b9feb9d2be6d4e17830327375b4bc35b.png][]

### 方法 ###

#### .modal(options) ####

将你指定的内容作为模态框启动。其接受一个可选的`object`类型的参数。

$('#myModal').modal({
      keyboard: false
    })

#### .modal('toggle') ####

手动启动或隐藏模态框。

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

手动打开一个模态框。

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

手动隐藏一个模态框。

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

为按钮添加了onclick事件，也就是通过点击按钮触发事件来进行模态框的弹出。

### 事件 ###

Bootstrap的模态框类暴露了一些事件用于截获并执行自己的代码。

![12034407-dcb07afbe6664c029644ee28522d53b7.png][]

效果就是分别在显示时显示后关闭时关闭后可以执行自定义的函数。

[bower.json]: https://github.com/twbs/bootstrap/blob/v3.0.3/bower.json
[Link 1]: http://groups.google.com/group/twitter-bootstrap
[Link 2]: http://v3.bootcss.com/getting-started#mobile-modals
[Center]: /images/20220824/dbdc5389c39f4e06be528b4c05b4e0e3.png
[12033216-b9feb9d2be6d4e17830327375b4bc35b.png]: /images/20220824/1c6233674c224bb88162978e847ad2fc.png
[12034407-dcb07afbe6664c029644ee28522d53b7.png]: /images/20220824/0c59b768fa3844ecbb944c3821f931ed.png