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

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

Answer 2

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

Answer 3

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

Answer 4

use this code end of all javascript code:

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

jsfiddle

Answer 5

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

Answer 6

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