Bootstrap 3 - Modal with Alternate Keypress

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" id="launchModal">
    Launch demo modal <br/>
    (with Shift, Alt, or Ctrl Optional)
</button>

<div class="modal fade" id="regModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Regular Modal</p>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="shiftModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Shift Modal</p>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ctrlModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div...

JavaScript

$("#launchModal").click(function(e) {
    if (e.ctrlKey) {
        $('#ctrlModal').modal('show');
    } else if (e.altKey) {
        $('#altModal').modal('show');
    } else if (e.shiftKey) {
        $('#shiftModal').modal('show');
    } else {
        $('#regModal').modal('show');
    }    
});