bootstrap里的弹框组件Model

首先，你得引入对应的包：

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

接着创建一个提供出发弹框的标签：

<span class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ww">
点我
</span>

这里的标签也可用<button></button>

再接着就是创建弹框：

<!-- 模态框（Modal） -->
<div class="modal fade" id="." tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
标题
</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>

值得提醒的是，span 标签或者是你的button标，这个data-toggle="modal"属性用来把 <div> 的内容识别为模态框；里面的data-target属性的值，就是你创建弹出框的id的值 ，这个是要保持一致的；关于.fade样式是用来让模态窗被切换会有淡入淡出的效果；aria-labelledby属性用来确定引入该模板的标题；aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）；

另外如果想要单独引用该插件的功能，那么您需要引用 modal.js。或者，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用jquery创建：

<script>$(function() {

$('#myModal').modal('hide');//hide和show控制model的隐藏和显示，其中toogle也是可以用的

});

// $('#myModal').on('hidden', function () {// do something…});

</script>

其中关闭按钮事件：

 $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('点击的是关闭按钮');})
   });

注意：show.bs.model,相当于模态框对用户可见时触发，

hide.bs.model，相当于触发了hide事件，即为隐藏。