实现原理解析：

bootstrap中的“模态弹出框”有以下几个特点：

1、模态弹出窗是固定在浏览器中的。

2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。

3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

固定在浏览器(源代码)实现：

/*bootstrap.css文件第5379行～第5389行*/
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

水平居中(源代码)实现：

/*bootstrap.css文件第5407行～第5411行*/
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

当浏览器视窗大于768px时，模态弹出窗的宽度为600px（源代码）实现：

/*bootstrap.css文件第5479行～第5491行*/
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}