bootstrap前端框架—模态框

1、什么是模态框？

这里说的模态框，其实就是指的在覆盖在父窗体上的子窗体。可用来做交互，其实经常我我们会看到模态框用来登录、确定等等交互，就比如这样的：

这就是一个模态框，相信大家都差不多遇到，那到底是怎么实现这种效果的呢，bootstrap已经为我们提供了相应的组件。

2、创建模态框

现在让我们先看看bootstrap给我提供的模态框的基本结构，自己先看看最基本的代码结构：

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" >
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close">&times;</button>
       <h4 class="modal-title">模态框（Modal）标题</h4>
     </div>
     <div class="modal-body">
       模态框主体内容
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
       <button type="button" class="btn btn-primary">提交更改</button>
     </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

上面就是最简单的模态框的结构，我们先一起看看代码的大概意思：

modal：表示这是一个模态框；

fade：表示淡入淡出的效果；

modal-dialog ：表示用户操作的窗口；

modal-content ：表示模态框的主体内容；

modal-header：表示模态框主体内容的头部；

modal-title：表示模态头部中的标题；

modal-body：表示模态框主体内容的主体部分；

扫描二维码关注公众号，回复： 2487858 查看本文章

modal-footer ：表示模态框主体内容的底部；

data-dismiss：这个属性，表示关闭，使用jQuery实现关闭模态框的效果；

如果你直接复制了上面的代码，是不是很奇怪咋没有用？因为模态框默认是隐藏状态，需要触发事件，比如你点击某个按钮，模态框就会弹出了，所以我们只需要给模态框一个触发条件：

<button class="btn btn-primary" data-target="#myModal" data-toggle="modal">打开模态框</button>

上面我给了一个按钮，通过点击按钮来触发模态框，先看看这个按钮怎么控制模态框：

data-target：表示指定操作id为myModal的模态框；

data-toggle：表示切换模态框的有隐藏和显示（使用jQuery中的toggle方法）；

好了，这样的话，一个模态框的基本结构已经完成，看看效果图是怎么样的：

当我们完成了模态框暗暗高兴的时候，却发现随便点下模态框外面的蒙板，模态框就消失了，这个好像和我们别的网站看到的很多模态框效果不一样啊，别急，bootstrap还提供了很多class类实现不同的效果，我们一个一个慢慢看。

data-backdrop="static"：指定一个静态的背景，当用户点击模态框外部时不会关闭模态框（为false灰色蒙蔽效果会消失；默认为true）；

data-keyboard="true"：表示ESC健是否有效，不写这个属性，默认为true,必须添加tabindex="-1"才能生效（tabindex用来设置元素的tab健循序，要设置一个数字才能生效）；

具体的效果大家可以去尝试下。

3、使用js操作模态框

bootstrap中的js操作都是有依赖jQuery，模态框一样如此。

<button class="btn btn-warning" id="btn_modal">打开模态框</button>
<script>
        //点击显示模态框
	$("#btn_modal").click(function(){
		$("#myModal").modal("show")
	})
        
        //点击隐藏模态框
//	$("#btn_modal").click(function(){
//		$("#myModal").modal("hide")
//	})

</script>

我们可以直接使用modal()方法，可以直接在modal()方法里添加状态；

模态框还为我们提供了几种事件方法；

show.bs.modal：在调用 show 方法后触发。例如：

$('#myModal').on('show.bs.modal', function () {
    alert("我要打开模态框")
})

shown.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

$('#myModal').on('shown.bs.modal', function () {
  alert("我已经打开了模态框")
})

hide.bs.modal：当调用 hide 实例方法时触发。

$('#myModal').on('hide.bs.modal', function () {
  alert("我要隐藏模态框")
})

hidden.bs.modal：当模态框完全对用户隐藏时触发。

$('#myModal').on('hidden.bs.modal', function () {
  alert("我要已经隐藏了模态框")
})

bootstrap提供的方法和class类大致上就这些，可以根据实际的情况使用这些方法。