javascript - 当我点击侧面时弹出窗体不会关闭

Question

我使用了 w3schools 的弹出式表单。一切都很好，直到我改变这些元素的顺序:

<div class="containerlog" id="containerlog">
<form class="modal-content" action="/action_page.php">

但我需要按此顺序使用它们。现在，当我在网站上的任何地方单击侧面时，它都不会关闭，但是当我单击更高或更低时，它就会起作用。你可以看看片段。单击“prihlásiť sa”，然后尝试关闭窗口。

/* RegistraionLoginForm */

.accounthave {
    display: block;
    text-decoration: none;
    color: black;
    margin-top: 8%;
}

.regsocmedbtnf {
    display: block;
     margin: 1% 20% 1% 20%;
    width: 60%;
    padding: 2%;
    text-decoration: none;
    color: white;
    background-color: #3B5998;
    border-radius: 3px;
}

.regsocmedbtng {
    display: block;
    margin: 1% 20% 1% 20%;
    width: 60%;
    padding: 2%;
    text-decoration: none;
    color: white;
    background-color: #dd4b39;
     border-radius: 2px;
}

.signupbtn {
    margin: 1% 20% 1% 20%;
    background-color: black;
    color:white;
    padding: 3%;
    border: none;
    cursor: pointer;
    border-radius: 2px;
}

.loghead {
    margin: 0 0 5% 0;
    padding: 5% 0 5% 0;
    text-align: center;
    border-bottom: 1px solid rgb(200,200,200);
}
.containerreg input {
    margin: 0% 20% 3% 20%;
    width: 60%;
    padding: 2%;
}

.containerreg input:focus {
    border: 1px solid black;
}

.containerlog input {
    margin: 0% 20% 3% 20%;
    width: 60%;
    padding: 2%;
}

.containerlog input:focus {
    border: 1px solid black;
}
.containerreg {
    text-align: center;
    display: none;
}

.containerlog {
    text-align: center;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by 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: rgba(0,0,0,0.9);
    padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 400px; /* Could be more or less, depending on screen size */
    height: 600px;
    border-radius: 2px;
}


 



/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}

   <div class="navlinksr">
        <a href="#" class="navlinkborder">Relácie</a>
        <a href="#">Webinár</a>
        <a href="#">Blog</a> 
        <a class="navlinksline"></a>
        <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
    
 <div id="id01" class="modal">
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        <!-- BEGIN - LOGFORM -->
        <div class="containerlog" id="containerlog">
        <form class="modal-content" action="/action_page.php">
        <h1 class="loghead"> Prihlásenie </h1>
        <input type="email" placeholder="Email: " required ><br>
        <input type="password" placeholder="Heslo: " required><br>
        <button type="submit" class="signupbtn">Prihlásiť sa sa</button>
        <p>Alebo</p>
        <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Prihlásenie cez Google </a>
        <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Prihlásenie cez Facebook </a>
        <a href="#" onclick="document.getElementById('containerreg').style.display='block';document.getElementById('containerlog').style.display='none'" class="accounthave">Nemáte účet? <b>Registrujte sa.</b></a>
        </form>
        </div>
        <!-- END - LOGFORM -->
        
        <!-- BEGIN - REGFORM -->
        <div class="containerreg" id="containerreg">
        <form class="modal-content" action="/action_page.php">
        <h1 class="loghead"> Registrácia </h1>
        <input type="text" placeholder="Meno: " required><br>
        <input type="text" placeholder="Priezvisko: " required><br>
        <input type="email" placeholder="Email: " required><br>
        <input type="password" placeholder="Heslo: " required><br>
        <input type="password" placeholder="Zopakujte heslo: " required><br>
        <button type="submit" class="signupbtn">Registrovať sa</button>
        <p>Alebo</p>
        <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Registrácia cez Google </a>
        <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Registrácia cez Facebook </a>
        <a  href="#" class="accounthave" onclick="document.getElementById('containerreg').style.display='none';document.getElementById('containerlog').style.display='block'">Máte už účet? <b>Prihláste sa.</b></a>
        </form>
        </div>
        </div>
        
<script>
// Get the modal
var modal = document.getElementById('id01');

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

Answer 1

这是我的解决方案
我做了一些风格修正

我更新了这个元素

.modal-content {
  background-color: #fefefe;
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  /* Could be more or less, depending on screen size */
  height: 600px;
  border-radius: 2px;
}

我添加了这个样式

.containerlog {
  margin: 5% auto 15% auto;
  width: 400px;
}

这应该没问题

/* RegistraionLoginForm */

.accounthave {
  display: block;
  text-decoration: none;
  color: black;
  margin-top: 8%;
}

.regsocmedbtnf {
  display: block;
  margin: 1% 20% 1% 20%;
  width: 60%;
  padding: 2%;
  text-decoration: none;
  color: white;
  background-color: #3B5998;
  border-radius: 3px;
}

.regsocmedbtng {
  display: block;
  margin: 1% 20% 1% 20%;
  width: 60%;
  padding: 2%;
  text-decoration: none;
  color: white;
  background-color: #dd4b39;
  border-radius: 2px;
}

.signupbtn {
  margin: 1% 20% 1% 20%;
  background-color: black;
  color: white;
  padding: 3%;
  border: none;
  cursor: pointer;
  border-radius: 2px;
}

.loghead {
  margin: 0 0 5% 0;
  padding: 5% 0 5% 0;
  text-align: center;
  border-bottom: 1px solid rgb(200, 200, 200);
}

.containerreg input {
  margin: 0% 20% 3% 20%;
  width: 60%;
  padding: 2%;
}

.containerreg input:focus {
  border: 1px solid black;
}

.containerlog {
  margin: 5% auto 15% auto;
  width: 400px;
}

.containerlog input {
  margin: 0% 20% 3% 20%;
  width: 60%;
  padding: 2%;
}

.containerlog input:focus {
  border: 1px solid black;
}

.containerreg {
  text-align: center;
  display: none;
}

.containerlog {
  text-align: center;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by 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: rgba(0, 0, 0, 0.9);
  padding-top: 50px;
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  /* Could be more or less, depending on screen size */
  height: 600px;
  border-radius: 2px;
}


/* Clear floats */

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {
  .cancelbtn,
  .signupbtn {
    width: 100%;
  }
}

<div class="navlinksr">
  <a href="#" class="navlinkborder">Relácie</a>
  <a href="#">Webinár</a>
  <a href="#">Blog</a>
  <a class="navlinksline"></a>
  <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
</div>

<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  <!-- BEGIN - LOGFORM -->
  <div class="containerlog" id="containerlog">
    <form class="modal-content" action="/action_page.php">
      <h1 class="loghead"> Prihlásenie </h1>
      <input type="email" placeholder="Email: " required><br>
      <input type="password" placeholder="Heslo: " required><br>
      <button type="submit" class="signupbtn">Prihlásiť sa sa</button>
      <p>Alebo</p>
      <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Prihlásenie cez Google </a>
      <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Prihlásenie cez Facebook </a>
      <a href="#" onclick="document.getElementById('containerreg').style.display='block';document.getElementById('containerlog').style.display='none'" class="accounthave">Nemáte účet? <b>Registrujte sa.</b></a>
    </form>
  </div>
  <!-- END - LOGFORM -->

  <!-- BEGIN - REGFORM -->
  <div class="containerreg" id="containerreg">
    <form class="modal-content" action="/action_page.php">
      <h1 class="loghead"> Registrácia </h1>
      <input type="text" placeholder="Meno: " required><br>
      <input type="text" placeholder="Priezvisko: " required><br>
      <input type="email" placeholder="Email: " required><br>
      <input type="password" placeholder="Heslo: " required><br>
      <input type="password" placeholder="Zopakujte heslo: " required><br>
      <button type="submit" class="signupbtn">Registrovať sa</button>
      <p>Alebo</p>
      <a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Registrácia cez Google </a>
      <a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Registrácia cez Facebook </a>
      <a href="#" class="accounthave" onclick="document.getElementById('containerreg').style.display='none';document.getElementById('containerlog').style.display='block'">Máte už účet? <b>Prihláste sa.</b></a>
    </form>
  </div>
</div>

<script>
  // Get the modal
  var modal = document.getElementById('id01');

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    console.log(event.target)
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>