使用说明
两部分需要定义:
- 模态框的触发元素,需要data-toggle="modal",以便被初始化;需要data-target="#example"或href指定模态框
- 模态框,模态框容器需要与data-target对应的类或id,其内容部分可以用"modal-content"的类来美化样式
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">
触发按钮
</button>
<div class="modal" id="myModal">
<div class="modal-content">
<div class="modal-header">
title
</div>
<div class="modal-body">
body
</div>
</div>
</div>
核心思想
- 页面完成加载后,为所有含有data-toggle="modal"的元素绑定点击事件
- 模态框出现的逻辑:先出现遮罩层,再出现模态框
- 为body增加"modal-open"类,作用是给body增加overflow:hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式
- 调用dropback函数,变量shown为true,所以插入出现遮罩层(若遮罩层需要过渡,过渡的逻辑也在这里)
- 在传给dropback的回调里(即完成遮罩层出现后),调用$el.show()方法使模态框出现(display:block),再增加"in"类使他过渡的出现
- 模态框的隐藏逻辑:先隐藏模态框,再隐藏遮罩层
- 先去除"in"类,使模态框opacity变为0
- 在过渡效果的完成后用$el.hide()隐藏模态框
- 调用dropback函数,变量shown为false,所以移除遮罩层
- 在出给dropback的回调里(即完成遮罩层的隐藏后),清除"modal-open"类
初始化
为触发元素绑定点击事件
// 在初始化时为含data-toggle属性的元素绑定点击事件
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) ret