bootstrap 模态框

1、html代码

属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）

<!--定义一个模态框 class="modal fade" aria-hidden="false" role="dialog"-->
  <div class="modal fade" id="modelwin" role="dialog" aria-hidden="false">
    <div class="modal-dialog">
      <!-- 模态框中所有内容-->
      <div class="modal-content">
        <!--头部-->
        <div class="modal-header">
          <!--取消X-->
          <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
          <!--头部标题-->
          <h2 class="modal-title pull-left">这是模态框标题</h2>
        </div>
        <!--身体内容部分-->
        <div class="modal-body">
          <!--填写内容-->
          <div class="progress ">
            <div class="progress-bar progress-bar-danger progress-bar-striped active" style=" 40%" title="完成 40%"></div>
          </div>
        </div>
        <!--脚页-->
        <div class="modal-footer">
          <!--关闭-->
          <button  type="button" data-dismiss="modal" class="btn btn-default">
            关闭
          </button>
          <button class="btn btn-primary">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

2、js

//为了让弹出框居中        
$('#modelwin').on('shown.bs.modal', function () {　　// 事件开始时被触发
  $("#modelwin .modal-dialog").css({
    "margin": "0px",
　　　"width":"55%",　　//设置弹出框的width
    "top": function () {  //设置高度
      return (document.documentElement.clientHeight - $("#modelwin .modal-dialog").height()) / 2 + "px";
    },
    "left": function () { // 左边位置
      return (document.documentElement.clientWidth - $("#modelwin .modal-dialog").width()) / 2 + "px";
    }
  });
});
$("#modelwin").modal({backdrop: 'static', keyboard: false});
$("#modelwin").modal("show");