如何为Web页面设置一个模态框

      在Web项目中，模态框因其灵活，简易而被广泛应用，例如添加修改数据、登录操作等等，常常不会选择添加一个新页面来进行操作，而是在当前页面弹出一个模态框来填写数据。下面是一个模态框的代码，使用时可以直接套用，只需要将它复制到html文件的body标签内部，尽量保证其他部分的id和某些关键属性的值不要冲突。

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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 -->

      

      一般的模态框主要分为三个部分，header，body和footer。header为抬头，主要显示该模态框的标题，本例中的标题是Modal title，可以进行替换。body是程序员操作的主题部分，由程序要自由添加，一般由一些input类似的输入框组成，起到添加或者修改数据的功能。footer一般包含关闭模态框和保存修改两个选项。

      对模态框进行操作，需要引入js和bootstrap相关文件，主要函数是.modal(option)。本例中要让模态框出现，可以进行如下操作：$('#myModal').modal("show")，其余的option常见选项还有hide（隐藏）和toggle（切换）。通常模态框都是被一个点击事件处罚的，而点击事件一般在页面加载完毕就会被加载，当多次加载同一个页面时，可能出现绑定多次点击事件的情况，数据会被重复添加或修改。因此，在模态框隐藏后，需要将绑定在模态框上的事件移除：

$('#myModal').on('hidden.bs.modal', function(e){
    			$("#myModal").off();//移除模态框上的所有事件
})

      hidden.bs.modal表示在模态框隐藏后这个事件，off()表示移除该js对象上的所有事件。相关的事件还有hide.bs.modal（隐藏时事件），show.bs.modal(显现时事件)，shown.bs.modal（显现后事件）。