Bootstrap Modal does not work with Version 4.4.1

Question

I have a normal modal dialog. It was working with Bootstrap Version 4.1.0. Now I upgraded to Version 4.4.1 and it does not work any more. Why is that? I think there are no differences between both versions regarding modal dialogs.

<div class="modal fade" id="1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="update" method="POST">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel_1">Edit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    Test

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                    <button type="submit" class="btn btn-primary">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#1">
    Open Modal
</button>

Find the Bootstrap versions here:

Update 1:

The following workaround works:

    $('button[data-toggle=modal]').click(function(){      
      $(".modal").modal();
    });

tao · Accepted Answer · 2020-01-19T20:21:14.790

It has to do with your modal id being numeric. If you change the modal's id to _1 and the button's data-target to #_1 it starts working.

~~Looking further into this issue, it turns out in your example,~~

document.getElementById('1')

... does return the modal, but

document.querySelector('#1')

... returns an error:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.

My wild guess is that, internally, Bootstrap uses querySelector passing it the data-target attribute of your button. However, since no error is being shown, I'm guessing this all happens in a try/catch block. I might be wrong, though, I'm simply speculating.

...and, looking even further into the issue it turns out selectors starting with digits are, technically, valid but they require some further handling. Namely, your <button>s data-target attribute must be data-target="#\31" or data-target="#\000031", if you really want to use numeric ids.

See it working.

And it's not even Bootstrap specific, it's how DOM selectors work:

#\31 { color: red; }
.\32 { color: blue; }

<span id="1">red</span>
<span class="2">blue</span>

One more thing (not directly related): you are missing the required popper.js import (see Quickstart). It's required for popups, tooltips and the like, which places them directly on <body> but positions them correctly as if they were children of the element beeing hovered, so that the popup can overflow parents with overflow: hidden. As a general rule, you want to include it.

Bootstrap Modal does not work with Version 4.4.1

1 Answers1