时间戳

首页 > 解决方案 > 在两个引导模式之间切换不起作用

bootstrap-4 - 在两个引导模式之间切换不起作用

问题描述

我正在 django 中创建登录/帐户，我正在尝试使用模式，以便用户可以创建两个帐户之一。我的设计基于 bootstrap 的'Toggle between modals' 示例。

然而，我似乎无法让它完全发挥作用。我让它正确切换一次，但在两者之间连续切换时它会变得混乱。如果有人知道发生了什么，将不胜感激。

这是我的参考代码：

    <!-- Button trigger modal -->
    <a role="button" class="btn btn-primary btn-lg mt-3" data-bs-toggle="modal" href="#createCoach">
        Create an account
    </a>

    <!-- Coach Creation Modal -->
    <div class="modal fade" id="createCoach" tabindex="-1"  aria-hidden="true" aria-labelledby="modalLabel">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCoach" disabled>
                            Create Coach Account
                        </button>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createAthlete">
                            Create Athlete Account
                        </button>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="" method="POST">
                        {% csrf_token %}
                        {{coach_creation_form|crispy}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" value="1" name="create-coach">Create coach account</button>
                </div>
                    </form>
            </div>
        </div>
    </div>

    <!-- Athlete Creation Modal -->
    <div class="modal fade" id="createAthlete" tabindex="-1" aria-hidden="true" aria-labelledby="modalLabel2">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel2">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createCoach">
                            Create Coach Account
                        </button>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createAthlete" disabled>
                            Create Athlete Account
                        </button>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="" method="POST">
                        {% csrf_token %}
                        {{athlete_create_form|crispy}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" value="1" name="create-athlete">Create athlete account</button>
                </div>
                    </form>
            </div>
        </div>
    </div>

谢谢！

标签： bootstrap-4bootstrap-modal

解决方案

我测试了你的代码，它对我来说很好。我注意到的一件事是您的结束</form>标签位于modal-body之外。您能否澄清一下“在两者之间的连续切换过程中搞砸了”。

推荐阅读