如何在模态中添加另一个模态答案

【问题标题】：How to add another modal inside of the modal如何在模态中添加另一个模态
【发布时间】：2021-10-02 18:57:49
【问题描述】：

我有一个登录按钮，里面有一个“忘记密码”链接：

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

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

<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";
  }
};

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

【问题讨论】：

标签： javascript html css modal-dialog bootstrap-modal

【解决方案1】：

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

【讨论】：