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 foc

Answer 1

Using Bootstrap version 3.3.2 and none of the above solution worked.

Adding the following CSS did the trick

.modal-backdrop {
    position: static; 
}

Answer 2

Please remove:

tabindex="-1"

from

<div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Use this one instead:

<div id="myModal" class="modal hide" data-backdrop="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Answer 3

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/

Answer 4

Following way can fix this issue for Bootstrap v2.3.2, Kendo UI Grid version 2013.3.1119.340 in IE11.

the point is remove class "in" from modal's class. No need to use "style='display:none;'" since it will cause Kendo Grid UI oddly.

html codes before fixed:

  <div class="modal hide fade in" id="YourWindow" role="dialog">

html codes after fixed:

  <div class="modal hide fade" id="YourWindow" role="dialog">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            
       </div>
       <div class="modal-body" >
          <div id="YourWindowBody">
          </div>
       </div>
       <div class="modal-footer">
          <button type="button" data-dismiss="modal">Close</button>      
       </div>
  </div>

same time, add following line of javascript:

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

Answer 5

Please remove:

tabindex="-1"

and change the first line of the modal to

tabindex=""

This will enable focus to input fields.