Twitter Bootstrap modal blocks text input field

Question

I am trying to use a modal as a popup help window. I set backdrop to 'nothing'. When the modal is opened (without backdrop) input fields in 'original' page cannot be focused.

Other input types (checkbox and button in example) work well...

Any idea ?

My code:

<div class="container">
<!-- Button to trigger modal -->
  <form>
      <label>Input</label>
      <input type="text" placeholder="Type something…">
      <label class="checkbox">
        <input type="checkbox">Checkbox
      </label>
      <button type="submit" class="btn">Submit</button>
  </form>

  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

Simple Javascript to make the popup draggable:

$('#myModal').draggable();

All this on JSFiddle...

http://jsfiddle.net/Jxdd8/3/

question from:https://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field

Answer 1

It sounds like a modal isn't the right solution to your problem here.

A modal dialog by definition shouldn't allow the user to interact with anything below it.

In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

- http://en.wikipedia.org/wiki/Modal_window

That being said, there is a way to get around it. Bootstrap sets up an event listener to steal focus from everything else, and that's what's stopping you from editing the text input. The other buttons work because they don't require focus, only a click event.

You can listen for the 'shown' event that the bootstrap modal triggers, and disable the focus listener it sets.

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});

And just for fun: http://jsfiddle.net/Jxdd8/4/