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/

Omnibus

So glad I found this question. It's hard googling "Make a modal not a modal" :) – Appendicitis

You should mark Eric's answer as accepted. – Appendicitis

This is a real issue when using select2 or similar components in a modal window. Select2 creates an input that's not a descendant to the modal so the answer by Eric Freese solves this issue. Hopefully this comments helps someone! – Houseboy

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/

Felicitation

Thank, that works great ! I agree this is against definition of modal, anyway, I wanted a dialog box over a page, Bootstrap modal is great for redendering this !!! Looks like the modal stealing focus is not working on all inputs elements ! – Omnibus

Works great!!! So glad I found this! I wish we could vote for an answer to be accepted :) – Appendicitis

thanks for this clear answer, now I know what's modal for. Where can I upvote more than ones? – Schizoid

this answer worked perfectly for using a Kendo UI grid in a Bootstrap modal (after noting @animativ's update for Bootstrap 3+). – Sassenach

This answer worked properly in more browsers than the other answers – Tellurian

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

Rao

I am using dynamicly generated modals. Any way to just turn it off completely? $(document).on('shown.bs.modal', function() { $(document).off('focusin.modal'); }); Tried this, didn't work :-( – Despondent

Thanks for the post. This is the best fix...I tried everything to get around this however at the end of the day this is the most painless way. I have a question though...why does $(document)... work but $(this)... does not? Not that it really matters I'm just curious. – Faxan

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

Wolf

Please include explanation about why you think it would solve the OP's problem - it might not be obvious for everyone. – Hally

@Balázs agreed. This solution worked for me, but I had to look up why. Essentially, by saying tabindex="-1", the modal set all background inputs as will not receive focus. wufoo.com/html5/tabindex-attribute – Sophiesophism

This worked for me to show Kendo Dropdown elements. The shown event answers above were not triggering at all for me! Thanks! – Theron

Oh my god, spent 2 days(16 working hours) for solving only this problem, Thank you very much, god bless you! – React

This worked in Chrome but not Firefox – Tellurian

Answer 4

Please remove:

tabindex="-1"

and change the first line of the modal to

tabindex=""

This will enable focus to input fields.

Buckley

I had tried so many things , ultimately your solution worked. Thank you so much. – Morin

This worked in Chrome but not Firefox – Tellurian

Answer 5

To solve it for Bootstrap 5 you simply need to add data-bs-focus="false" to your modal.

Policy

Answer 6

*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.

Melatonin

Answer 7

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

Executrix

Answer 8

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

Angevin

Popovers have a very different feel (In bootstrap anyway). A non-modal modal is exactly what I needed and I'm glad I found this question. – Appendicitis

Answer 9

use this code end of all javascript code:

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

jsfiddle

Jempty

but this for tinymce in bootstrap modal. – Jempty

The only solution that worked for me. Don't know why some guys down voted it earlier. – Gracioso

Answer 10

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

Knudsen

Answer 11

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

Gracioso

Answer 12

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

Adding the following CSS did the trick

.modal-backdrop {
    position: static; 
}

Stadler