How to add another modal inside of the modal-CodePudding

I have a Login button and inside of it there is a 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>

So when I click the forget password link, I want to open a new modal which is like this:

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

And here is my 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";
  }
};

But my problem is as soon as the second model opens, it automatically closes again. So I open Login modal box, then I click the a href which is Forget Password and as soon as I click that Forget Password modal is opening for 1 second and then closing automatically. Can you help me with this problem?

CodePudding user response：

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