Bootstrap Modal Base

by Irvin Dominin

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">Do you want to continue?
        <br>
        <br>
        <br>
        <br>
    </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>

JavaScript

$('.launchConfirm').on('click', function (e) {
    $('#confirm')
        .modal()
});

$(document).keyup(function (e) {
    if (e.which == 27 && $('body').hasClass('modal-open')) {
        console.log('esc')
    }
})

$(document).click(function (e) {
    if (e.target === $('.modal-scrollable')[0] && $('body').hasClass('modal-open')) {
        console.log('click')
    }
})