Bootstrap Snippet modal using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 == 1) {
    setModalMaxHeight($('.modal.in'));
  }
});
/* CodeMirror */
$('.code').each(function() {
  var $this = $(this),
      $code = $this.text(),
      $mode = $this.data('language');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"modal"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"modal" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"modal"
Bootstrap 3.0.0 Snippet by evarevirus