too long

Question

This might be a long shot and not possible but I had the idea and thought I'd ask.

I am using Bootstrap and have the below button which shows a login modal for users.

<!-- Button trigger modal -->
<div class="btn-group">
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal">
    Login
  </button>
</div>

Is it possible that if a keyboard key is held down whilst this button is pressed then it would show another modal, for example data-toggle="modal" data-target="#AdminModal">?

Answer 1

You can do this with JavaScript. Don't use data-toggle="modal" data-target="#Modal" because that's for the default case and in this scenario we'll want to roll our own.

You can have a regular button trigger like this:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" id="launchModal">
    Launch demo modal 
</button>

Then tap into the click event for it. The jQuery event object will expose the current keypress at the time of the event. Use those to choose whatever modal you would like.

$("#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');
    }    
});

Then just setup whatever modals you'd like to open

Working Demo in jsFiddle