Twitter Bootstrap modal blocks text input field

问题

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/

回答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/

回答2:

please remember that Eric Freese answer is no longer valid if you're using Twitter Bootstrap 3 - the event name has changed, so use the following code instead:

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

回答3:

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">

回答4:

*RESOLVED

In the event anyone is still stuck on this issue the solution is as follows:

After the div class <div class="modal fade" insert: style="display:none;" This will stop the modal from blocking the fields and it should resolve the issue.

回答5:

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');
    });

回答6:

as Eric Freese said, "A modal dialog by definition shouldn't allow the user to interact with anything below it." i guess what you are looking for could be found in the Popover, which has the option to allow html content http://twitter.github.com/bootstrap/javascript.html#popovers

回答7:

use this code end of all javascript code:

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

jsfiddle

回答8:

For me the problem was that I was using jquery 3.2.1, so I change it to 2.1.3 which was use on previous app we had develop and everything worked fine. Might be something with jquery and bootstrap compatibility versions.

Hope it helps

回答9:

Following worked for me:

$('#myModal').on("show.bs.modal", (ev) => {
    $('#myModal').find(".modal-content").on("mousedown", (e) => {

                if ($(e.target).is("input")) {
                    //Fix for bootstrap modal being stealing focus from inputs like textbox
                    e.stopImmediatePropagation();
                }
            });
});

回答10:

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

Adding the following CSS did the trick

.modal-backdrop {
    position: static; 
}

来源：https://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field

标签

twitter-bootstrap

modal-dialog