bootstrap

bootstrap的模态框

<button class="btn btn-primary aaa"  data-toggle="modal" data-target="#myModal">打开模态框</button> // 按钮
// 模态框
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
  <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>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

 

data-backdrop="static": 禁止点击空白处关闭模态框

data-dismiss="modal" // 关闭模态框

开启data-target="#myModal" // 开启模态框    #myModal是模态框的id

 

 方法: 

$('#myModal').modal({keyboard: false})

将页面中的某块内容作为模态框激活。接受可选参数 object。

 

$('#myModal').modal('toggle')
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发 shown.bs.modal 或 hidden.bs.modal 事件之前）。

$('#myModal').modal('show')
手动打开模态框。

$('#myModal').modal('hide')
手动隐藏模态框。
https://v3.bootcss.com/javascript/#modals