31-模态框的使用

只要使用bootstrap做的后台系统那么基本离不开模态框了。它是一个弹出框，而且是模态的。模态就是不能操作被遮挡的后面的内容。模态框其实是一个隐藏的div，点击按钮或者通过js可以打开这个模态框。

模态框的打开需要一个其他的js事件或者按钮的绑定：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
         这里可以是任何的html代码
      </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 -->Code language: HTML, XML (xml)

手动打开模态框。在模态框显示之前返回到主调函数中（也就是，发 shown.bs.modal 事件之前）。通过js来调用下面的代码：

$('#myModal').modal('show');Code language: JavaScript (javascript)

手动隐藏模态框。在模态框隐藏之前返回到主调函数中。通过在js方法中执行：

$('#myModal').modal('hide');Code language: JavaScript (javascript)