"data-bs-dismiss" not working in Bootstrap 5

Question

I have two modals. I'm trying to make the "Novo Avatar" button close its modal, which is #modal_debug, and then open the modal #modal_newAvatar. The problem is it doesn't close the modal, and instead just opens the new one on top. I've even tried to copy paste this example from the BS docs, which supposedly does the same I'm trying to achieve

https://getbootstrap.com/docs/5.0/components/modal/#toggle-between-modals

But the exact same happens. Is it something wrong with my version of bootstrap? I'm using 5.1.0.

<!-- Modal "Painel de Debug" -->
<div class="modal fade" id="modal_debug" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Painel de Debug</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <button type="button" class="btn btn-primary" data-bs-target="#modal_newAvatar" data-bs-toggle="modal" data-bs-dismiss="modal">Novo Avatar</button>
                <button type="button" class="btn btn-primary" data-bs-target="#modal_selAvatar" data-bs-toggle="modal" data-bs-dismiss="modal">Selecionar Avatar</button>
                <button type="button" class="btn btn-primary" data-bs-target="#modal_delAvatar" data-bs-toggle="modal" data-bs-dismiss="modal">Remover Avatar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal "Novo Avatar" -->
<div class="modal fade" id="modal_newAvatar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Novo Avatar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="form_newAvatar" autocomplete="off">
                    <label for="input_newAvatar_sceneKey">Cena de Jogo</label><br>
                    <input type="text" id="input_newAvatar_sceneKey" name="sceneKey" value="main-room" required><br><br>
                    <label for="input_newAvatar_name">Nome</label><br>
                    <input type="text" id="input_newAvatar_name" name="name" required><br><br>
                    <label for="input_newAvatar_x">x</label><br>
                    <input type="number" id="input_newAvatar_x" name="x" required><br><br>
                    <label for="input_newAvatar_y">y</label><br>
                    <input type="number" id="input_newAvatar_y" name="y" required>
                </form>
            </div>

            <div class="modal-footer">
                <button type="submit" form="form_newAvatar" class="btn btn-primary">Confirmar</button>
            </div>
        </div>
    </div>
</div>

Patrick Cal · Answer 1 · 2022-03-18T15:37:29.747

Had the same problem as you, use this solution: https://stackoverflow.com/a/58553800

It involves JavaScript, modify it to suit your needs.

<script>
//When clicking the first button this function 
//hides the first modal and then shows the second modal
$(function () {
    $('#firstModalButtonID').on('click', function () {
        $('#firstModalID').modal('hide');
        $('#secondModalID').modal('show');
    })
})

//When clicking the second button this function 
//hides the second modal and then shows the first modal
$(function () {
    $('#secondModalButtonID').on('click', function () {
        $('#secondModalID').modal('hide');
        $('#firstModalID').modal('show');
    })
})

"data-bs-dismiss" not working in Bootstrap 5

1 Answers1