javascript - Modal mostly keeps quiting immediatly -

i trying include modal in code. when clicking button/href, different file should shown in modal. took code here.

now, after loading animation (or after few ms) modal closes. weird part when press button few times, work , file shown.

here code (the relevant part):

// modal  var modal = document.getelementbyid('mymodal');    // button opens modal  var btn = document.getelementbyid("mybtn");    // <span> element closes modal  var span = document.getelementsbyclassname("close")[0];    // when user clicks on button, open modal  btn.onclick = function() {      modal.style.display = "flex";  };    // when user clicks on <span> (x), close modal  span.onclick = function() {      modal.style.display = "none";  };    // when user clicks anywhere outside of modal, close  window.onclick = function(event) {      if (event.target == modal) {          modal.style.display = "none";      }  };

/* modal (background) */  .modal {      display: none; /* hidden default */      position: fixed; /* stay in place */      z-index: 1; /* sit on top */      left: 0;      top: 0;      width: 100%; /* full width */      height: 100%; /* full height */      overflow: auto; /* enable scroll if needed */      background-color: rgb(0,0,0); /* fallback color */      background-color: rgba(0,0,0,0.4); /* black w/ opacity */  }    /* modal content/box */  .modal-content {      position: relative;      background-color: #fefefe;      margin: auto;      padding: 0;      border: 1px solid #888;      width: 80%;      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);  }    /* modal header */  .modal-header {      padding: 2px 16px;      background-color: #5cb85c;      color: white;  }    /* modal footer */  .modal-footer {      padding: 2px 16px;      background-color: #5cb85c;      color: white;  }    /* close button */  .close {      color: #aaa;      float: right;      font-size: 28px;      font-weight: bold;  }    .close:hover,  .close:focus {      color: black;      text-decoration: none;      cursor: pointer;  }

<div class="nav1">            <a href="index.php?page=users&action=login" id="mybtn">login</a>            </div>        <div id="mymodal" class="modal">          <div class="modal-content">              <div class="modal-header">                  <span class="close">&times;</span>                  <h2>modal header</h2>              </div>              <div class="modal-body">                  modal body      <?php      if (isset($_get["page"]) ) {          switch ($_get["page"]) {              case "post":                  include "./system/post/index.php";                  break;              case "users":                  include "./system/users/index.php";                  break;              default:                  include "start.php";                  break;          }      }      else      {          include "start.php";      }      ?>                </div>              <div class="modal-footer">                  modal footer              </div>          </div>          </div>      <script src="./system/style/modal.js"></script>

your issue seems me propagation of event. whenever click either btn or span modal won't show window.onclick happens , modal gets closed. so, solution add event.stoppropagation() in btn/span click events:

btn.onclick = function(event) {   event.stoppropagation(); // stop event bubble   modal.style.display = "flex"; }; span.onclick = function(event) {   event.stoppropagation(); // stop event bubble   modal.style.display = "none"; }; window.onclick = function(event) {   if (event.target == modal) {     modal.style.display = "none";   } };