Bootstrap Modal Base

by Ali Khaled

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>
<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">



  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">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) {
    $('#confirm')
        .modal({ backdrop: 'static', keyboard: false })
        .one('click', '[data-value]', function (e) {
            if($(this).data('value')) {
                alert('confirmed');
            } else {
                alert('canceled');
            }
        });
});