javascript - Bootstrap 3模态不显示

Question

我在网页中有 2 个模态框。其中一个用于注册新用户，另一个用于登录。

代码在这里

<div class="modal fade" id="register" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Register</h4>
            </div>
            <div class="modal-body" id="form">
                <div id="form-error-register" class="form-error"></div><br>

                <div class="input-group">
                  <span class="input-group-addon">Username: </span>
                  <input type="text" class="form-control" placeholder="2-20 characters" id="username-register">
                </div>

                <br>

                <div class="input-group">
                  <span class="input-group-addon">Password: </span>
                  <input type="password" class="form-control" placeholder="At least 5 characters" id="password-register">
                </div>

                <br>

                <div class="input-group">
                  <span class="input-group-addon">Confirm Password: </span>
                  <input type="password" class="form-control" placeholder="At least 5 characters" id="cpassword-register">
                </div>

                <br>

                <div class="input-group">
                  <span class="input-group-addon">Email: </span>
                  <input type="text" class="form-control" placeholder="Must be a real email address" id="email-register">
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" onclick="cancelRegister();">Cancel</button>
                <button class="btn btn-success" onclick="registerButton();">Login</button>
            </div>
        </div>
    </div>

    <div class="modal fade" id="login" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Login</h4>
            </div>
            <div class="modal-body" id="form">
                <div id="form-error-login" class="form-error"></div><br>

                <div class="input-group">
                  <span class="input-group-addon">Username: </span>
                  <input type="text" class="form-control" placeholder="" id="username-login">
                </div>

                <br>

                <div class="input-group">
                  <span class="input-group-addon">Password: </span>
                  <input type="password" class="form-control" placeholder="" id="password-login">
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" onclick="cancelLogin();">Cancel</button>
                <button class="btn btn-success" onclick="loginButton();">Login</button>
            </div>
        </div>
    </div>

注册模态显示正常，但模态不正常。

这是显示模态的代码:

<li><a href="#register" data-toggle="modal">Register</a></li>
<li><a href="#login" data-toggle="modal">Login</a></li>

这不可能是一些 css 错误，因为寄存器模态加载。 当我尝试加载登录模式(通过控制台中的 js 或通过按钮)时，网页变暗(好像正在显示模式)但模式从未显示。

Answer 1

#login 模态没有出现，因为它在#register 模态中。

您应该在#login 模式声明之前添加另一个 div 关闭标记。

模态框不可见的原因是它的父模态#register 模态框被隐藏了。