Bootstrap Modal

by Dilnei Rodrigues da Cunha

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<input type="checkbox" id="check" value="1" />
<br />

<div class="page-container">
  <div class="container">
    <br />
    <button class="btn launchConfirm">Launch Confirm</button>
  </div>
</div>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Delete?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

CSS

body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
  overflow-y: scroll;
}

@media (max-width: 979px) {
  .modal-open .page-container .navbar-fixed-top {
    overflow-y: visible;
  }
}

JavaScript

$('.launchConfirm').on('click', function(e) {
  if ($('#check').is(':checked')) {
    $('#confirm')
      .modal({
        backdrop: 'static',
        keyboard: false
      })
      .one('click', '#delete', function(e) {
        //delete function
      });
  }
});