Bootstrap 3模式未显示

Question

I have 2 modals in a webpage. One of them is for registering a new user and the other is for logging in.

Here is there code

<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>

The register modal shows fine but the modal does not.

Here is the code to show the modals:

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

This could not be some css error because the register modal loads. When I attempt to load the login modal (either via js in the console, or by the button) the webpage goes dark (as if a modal is showing) but the modal never shows.

Answer 1

The #login modal doesn't appear because it's inside the #register modal.

You should add another div close tag before the #login modal declaration.

The reason why the modal is not visible is that its parent, the #register modal, is hidden.