您的位置：首页 > Web前端 > BootStrap

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

2014-06-29 23:09 543 查看

在毕设中巩固的技术（二）中，我改写了一个导航栏里的搜索框，然后使用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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

3.2 结构分析

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

另外还有几点说明：
1、打开模态框的时候，其实我们还会看到一个遮罩层，这是通过添加了<div class="modal-backdrop fade in"></div>这个来实现的
2、我们可以很容易的改变模态框的样式

3.3 具体用法

Next，我们来介绍一下模态框的用法，这里说明一下，我一般很少使用Bootstrap提供的标签，而是通过js来调用。
仅仅只需一行JS代码，就可以通过元素的id myModal 调用模态框：

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

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

[thead]
[/thead]

名称	类型	默认值	描述
backdrop	boolean 或字符串 'static'	true	使用modal-backdrop，若为static，当点击模态框外的时候不会关闭模态框。.
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框。
show	boolean	true	模态框初始化之后就立即显示出来。
remote	path	false	如果提供的是 URL，将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容（只加载一次）并插入 .modal-content 内。如果使用的是 data 属性 API，还可以利用 href 属性指定内容来源地址。下面是一个实例： Copy <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

这几个新提供的属性里，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 事件

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

[thead]
[/thead]

事件类型	描述
show.bs.modal	show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal	hide 方法调用之后立即触发该事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal	从远端的数据源加载完数据之后触发该事件。

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航