How to setup remote modal in Bootstrap 5 CS HTML

Question

I'am trying to get a remote modal window working in Bootstrap 5 c# mvc.

I have an endpoint for the modal partial view setup correctly.

As per this post on Github, all you have to do is call some javascript. However it does not specify the elements.

I tried calling both the div for the modal and the button with a href itself.

In the console I am getting an Illegal invocation error:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" href="https://localhost:7023/Pokus/PokusModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade modal-data" id="exampleModal" tabindex="-1">
    <!-- Completes the modal component here -->
</div>

<script>
    const modal = document.getElementById('exampleModal')

    modal.addEventListener('show.bs.modal', function (event) {

        const link = event.relatedTarget.getAttribute('href');
        const modalData = document.querySelector('.modal-data');

        fetch(link).then(res => res.text()).then(html => {
            modalData.innerHTML = html;
        });
    });
</script>

Did the show.bs.modal event change?

How do I setup the modal to load using the href?

Answer 1

I got it working like so:

In my layout I have:

<div>
    <div class="modal fade" id="modal-container" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>
    <script type="text/javascript">

        document.addEventListener("DOMContentLoaded", () => {

            const modal = document.getElementById('modal-container')

            modal.addEventListener('show.bs.modal', function (event) {

                const link = event.relatedTarget.getAttribute('href');
                const modalData = document.querySelector('#modal-container');

                fetch(link).then(res => res.text()).then(html => {

                    modalData.innerHTML = html;

                    //if you want your modal to include scripts:
                    const scripts = modalData.getElementsByTagName('script');

                    for (var n = 0; n < scripts.length; n++)
                        eval(scripts[n].innerHTML);
                });
            });
        });
    </script>
</div>

Then I have any number of buttons, each pointing to an endpoint with their modal:

<a class="btn btn-danger" data-bs-target="#modal-container" data-bs-toggle="modal" href="/YourController/SomeAction/">Remove</a>

And your modal view looks like this:

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
                </div>
            </div>
        </div>

You can even include a script with the modal view, just mind the security concerns of using eval()!