bootstrap实现多种模态弹出层弹出框效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：bootstrap实现多种模态弹出层弹出框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

/* footer footnotes */
footer ol {
  border-top: 1px solid #eee;
  margin-top: 40px;
  padding-top: 15px;
  padding-left: 20px;
}

/* Bootstrap Docs */
.bs-example {
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
    -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
.bs-example:after {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #959595;
    text-transform: uppercase;
    letter-spacing: 1px;
    content: "Example";
}
.bs-example-padded-bottom {
    padding-bottom: 24px;
}
@media (min-width: 768px){
  .bs-example {
      margin-right: 0;
      margin-left: 0;
      background-color: #fff;
      border-color: #ddd;
      border-width: 1px;
      border-radius: 4px 4px 0 0;
      -webkit-box-shadow: none;
      box-shadow: none;
  }
}
.bs-example+.code {
    margin: -15px -15px 15px;
    border-width: 0 0 1px;
    border-radius: 0;
}
@media (min-width: 768px){
  .bs-example+.code {
      margin-top: -16px;
      margin-right: 0;
      margin-left: 0;
      border-width: 1px;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
  }
}
/* CodeMirror Bootstrap Theme */
.cm-s-bootstrap .cm-comment {
	font-style: italic;
	color: #999988;
}
.cm-s-bootstrap .cm-number {
	color: #F60;
}
.cm-s-bootstrap .cm-atom {
	color: #366;
}
.cm-s-bootstrap .cm-variable-2 {
	color: #99F;
}
.cm-s-bootstrap .cm-property {
	color: #99F;
}
.cm-s-bootstrap .cm-string {
	color: #DD1144;
}
.cm-s-bootstrap .cm-keyword {
	color: #069;
}
.cm-s-bootstrap .cm-operator {
	color: #555;
}
.cm-s-bootstrap .cm-qualifier {
	color: #0A8;
}
</style>


</head>

<body translate="no" >
  <div class="container">
  <h1 class="page-header">Bootstrap 3 Modal Vertically Center/Max-Height</h1>
  <p class="text-info">*Works with Bootstrap v3 - v3.3.7</p>
  <h3>Vertically Center</h3>
  <p>Vertically center your modals without declaring a <code>height</code>.<a href="#1">¹</a>
  </p>
  <div class="bs-example bs-example-padded-bottom">
    <!-- Button trigger modal -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Short modal
    </button>

    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">
      No Footer
    </button>

    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal4">
      No Header
    </button>
  </div>
  <pre class="code" data-language="css">.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}</pre>

  <h3>Max-Height</h3>
  <p>Modal <code>max-height</code> does not exceed window height with scrollable <code>.modal-body</code> and adapts on resize.</p>
  <div class="bs-example bs-example-padded-bottom">
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
      Long modal
    </button>
    
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal5">
      No Header &amp; Footer
    </button>

    <button class="btn btn-primary" data-toggle="modal" data-target="#myLargeModal">
      Large Modal
    </button>

    <button class="btn btn-primary" data-toggle="modal" data-target="#mySmallModal">
      Small Modal
    </button>
  </div>
  <pre class="code" data-language="javascript">function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = th.........完整代码请登录后点击上方下载按钮下载查看