在毕设中巩固的技术(二)中,我改写了一个导航栏里的搜索框,然后使用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)
下面附上官网最新提供的参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
backdrop | boolean 或 字符串'static' | true | 使用modal-backdrop,若为static,当点击模态框外的时候不会关闭模态框。. |
keyboard | boolean | true | 键盘上的 esc 键被按下时关闭模态框。 |
show | boolean | true | 模态框初始化之后就立即显示出来。 |
remote | path | false | 如果提供的是 URL,将利用 jQuery 的
Copy
|
1、写个基本的模态框
2、在按钮上注册click事件
3、click事件触发的同时调用load方法往.modal-content里塞数据
4、最后在load方法的回调里把模态框显示出来。
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 事件
最后,来介绍一下有关模态框的一些事件:
事件类型 | 描述 |
---|---|
show.bs.modal | show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的relatedTarget 属性进行访问。 |
shown.bs.modal | 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。 |
hide.bs.modal | hide 方法调用之后立即触发该事件。 |
hidden.bs.modal | 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。 |
loaded.bs.modal | 从远端的数据源加载完数据之后触发该事件。 |
$('#myModal').on('hidden.bs.modal', function (e) {
window.location.reload(true);
})