如何在模态内添加另一个模态

Question

我有一个登录按钮，里面有一个 link 'forget password':

<li class="nav-item">
                <a class="nav-link page-scroll" id="login">Login</a>
              </li>
<div id="loginModal" class="modal">
              <!-- Modal content -->
              <div class="modal-content">
                <span class="close" id="close"><i class="fa fa-times"></i></span>
                <div class="modal-title">LOGIN</div>
                <form>
                    <div class="form-group">
                      <input type="email" class="form-control" id="loginEmail" aria-describedby="emailHelp" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                      <input type="password" class="form-control" id="loginPassword" placeholder="Password">
                    </div>
                    <div class="button-area">
                        <button type="submit" class="btn btn-secondary">Log In</button>
                    </div>
                    <a href="" id="forgetPassword" class="forget-password">Forget Password?</a>
                  </form>
              </div>
            </div>

所以当我点击忘记密码 link 时，我想打开一个新的模态，如下所示：

<div id="forgetPasswordModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                  <span class="close" id="close3"><i class="fa fa-times"></i></span>
                  <div class="modal-title">FORGET PASSWORD</div>
                  <form>
                      <div class="form-group">
                        <input type="email" class="form-control" id="loginEmail" aria-describedby="emailHelp" placeholder="Enter email">
                      </div>
                      <div class="button-area">
                          <button type="submit" class="btn btn-secondary">Reset Password</button>
                      </div>
                    </form>
                </div>
              </div>

这是我的 js：

// Get the modal
var modal = document.getElementById("loginModal");
var modal2 = document.getElementById("registerModal");
var modal3 = document.getElementById("forgetPasswordModal");

// Get the button that opens the modal
var btn = document.getElementById("login");
var btn3 = document.getElementById("forgetPassword");

// Get the <span> element that closes the modal
var span = document.getElementById("close");
var span3 = document.getElementById("close3");

// When the user clicks the button, open the modal
btn.onclick = function () {
  modal.style.display = "block";
};
btn3.onclick = function () {
  modal3.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
  modal.style.display = "none";
};
span3.onclick = function () {
  modal3.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};
window.onclick = function (event) {
  if (event.target == modal3) {
    modal3.style.display = "none";
  }
};

但是我的问题是第二个模型一打开，它又自动关闭了。所以我打开登录模式框，然后单击忘记密码的 href，一旦单击忘记密码模式打开 1 秒，然后自动关闭。你能帮我解决这个问题吗？

Answer 1

从 <a href="" id="forgetPassword" class="forget-password">Forget Password?</a>

中删除 href=""

如何在模态内添加另一个模态

How to add another modal inside of the modal

html

javascript

css

modal-dialog

bootstrap-modal