CODEWITHSUNDEEP
javascripthtmlsimplemodal
AlonBR
AlonBR

Reputation: 9

modal closes after changing content

I have a modal div with two content divs and a button to open the modal:

<button id="activate_modal">click me!</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="first_data">
      <img src="images/bla.png">
      <a id="next_button" href="">go to next</a> <!-- I need it to look like a regular hyperlink-->
    </div>
    <div id="second_data" style="display:none;">
      <h1>success!</h1>
    <div>
  </div>
</div>

Now the modal has this css styling:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  position: relative;
  width: 484px;
  height: 700px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fefefe;
  margin: 5% auto; 
}

And finally, a javascript to manage the modal behavior:

var modal = document.getElementById("modal");
var btn = document.getElementById("activate_modal");
var span = document.getElementsByClassName("close")[0];
var modal_II = document.getElementById("second_data");
var btn_r = document.getElementById("next_button");
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
btn_r.onclick = function() {
  var modal_I = document.getElementById("first_data");
  modal_I.style.display = "none";
  modal_II.style.display = "block";
}

The problem is that when I click on the go to next link, the second data div becomes visible for a second and then the entire modal div closes! Anyone can see what is wrong with my code?

I did try to comment out:

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

In case I only have a really sensitive touch-pad or something, but no luck... the entire modal div disappears. :-/ Please help.

Upvotes: 0

Views: 28

Answers (1)

Md. Rakibul Islam
Md. Rakibul Islam

Reputation: 2311

I found the issue. It is nothing on your JS codes. Just simply put a # into the href attribute of the "go to next" link :) It will work perfectly. It was a page refresh. That's why after click everything was gone.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
      position: relative;
      width: 484px;
      height: 700px;
      border-radius: 5px;
      box-sizing: border-box;
      background-color: #fefefe;
      margin: 5% auto; 
    }
  </style>
</head>
<body>
  <button id="activate_modal">click me!</button>
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div id="first_data">
        <img src="images/bla.png">
        <a id="next_button" href="#">go to next</a> <!-- I need it to look like a regular hyperlink-->
      </div>
      <div id="second_data" style="display:none;">
        <h1>success!</h1>
      <div>
    </div>
  </div>

  <script>
    var modal = document.getElementById("modal");
    var btn = document.getElementById("activate_modal");
    var span = document.getElementsByClassName("close")[0];
    var modal_II = document.getElementById("second_data");
    var btn_r = document.getElementById("next_button");
    btn.onclick = function() {
      modal.style.display = "block";
    }
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
    btn_r.onclick = function() {
      var modal_I = document.getElementById("first_data");
      modal_I.style.display = "none";
      modal_II.style.display = "block";

    }
  </script>
</body>
</html>

Upvotes: 0

Related Questions