html - “data-bs-dismiss”在 Bootstrap 5 中不起作用

Question

我有两个模态。我正在尝试使"Novo Avatar"按钮关闭其模态，即#modal_debug，然后打开模态#modal_newAvatar。问题是它没有关闭模式，而是在顶部打开新模式。我什至尝试从 BS 文档中复制粘贴此示例，据说这与我试图实现的相同

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

但同样的事情也会发生。我的引导程序版本有问题吗？我正在使用 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>

标签： htmlbootstrap-5