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  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });
  
  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});</pre>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad sed dolores iusto ab vero tempora in earum accusantium quas iure repellendus fugit ipsa reiciendis. Id illo natus sequi ex eveniet!</p>
        </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 -->

  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModal2Label">Modal title</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sit ipsum quis magnam tenetur dignissimos quam molestiae explicabo hic veritatis nobis facilis ipsa saepe voluptas doloribus voluptates culpa nesciunt quidem?</p>
          <p>Voluptatibus suscipit ipsum quisquam architecto provident iusto eaque nemo nulla minima voluptas molestiae aliquam! Laborum est repellat aliquid esse optio cupiditate sunt vitae maiores voluptate incidunt aut quaerat rem. Sequi.</p>
          <p>Tenetur atque aliquam quibusdam sapiente modi totam magnam blanditiis repudiandae quia illo eum cupiditate nihil dolore at veritatis culpa corporis! Aliquid error magnam tempore itaque non mollitia nemo ipsa exercitationem.</p>
          <p>Labore assumenda expedita saepe doloremque animi optio maxime repudiandae incidunt. Obcaecati voluptates eveniet fuga harum facere dicta quidem vero aliquid totam natus doloremque quibusdam nesciunt iusto magnam expedita itaque ut?</p>
          <p>Consectetur ex quae nisi alias doloribus autem cupiditate nobis dolore sit esse voluptates architecto dignissimos quis earum deserunt aliquid itaque nesciunt tempora porro error! Harum dicta minima quae molestias atque?</p>
          <p>Fugiat velit quaerat sed pariatur quo debitis aut enim ipsam consequuntur itaque officiis omnis dolore ut reprehenderit rem quisquam aliquam amet eius tempora ratione est praesentium magni laudantium nulla quod.</p>
          <p>Aperiam vel cupiditate enim ratione architecto facilis molestias minus neque sint fugiat reiciendis necessitatibus minima sit voluptas molestiae reprehenderit ullam sequi ut quae in. Et tempora quod vero illo praesentium.</p>
          <p>Tempora sequi nihil cum esse nemo voluptatum iure impedit molestias tempore sapiente amet nulla eos architecto dolor enim expedita quidem. Reprehenderit earum aperiam voluptatem magnam suscipit cum consequatur dicta rem.</p>
          <p>Facilis aperiam similique assumenda ab aut quo cupiditate corporis dolorum recusandae impedit tenetur doloremque id nesciunt sequi molestiae nostrum alias quibusdam ipsam enim numquam exercitationem tempora culpa ex ullam autem!</p>
          <p>Dolores soluta quia voluptas rerum ducimus et reiciendis nulla aut blanditiis dolore vero deleniti impedit itaque aliquid consequuntur dolorem id officiis assumenda quam aspernatur! Optio consequatur deserunt magni nulla nam.</p>
          <p>Iste ea doloremque omnis sunt quia voluptatum eum dolore. Nihil doloremque tempore culpa molestiae accusamus non.........完整代码请登录后点击上方下载按钮下载查看