I can not make the pop up close with the code i am using now. I thought it could maybe wordpress ann-CodePudding

I was trying to learn a little bit more of javascript and i got stuck in a single popup to use in the main page of a website i am creating in wordpress. I have tried to change the var of the code, but it seems not to work. I have seen that the console.log(modal iniciated) is working just fine, but the other does not give a sign of life.

    <html>
<div  id="popup-show_1" style="">
      <div >
        <span  id="popup-x_1">&times;</span>
        
        <div >
            <img  src="https://mlservice.blob.core.windows.net/website/UploadBestanden/tn/cc675fd2-f457-4986-af22-2810ce7a3167-1440-420.jpg">
        </div>
        <div > 
          <h2  ><span >Nieuw hier ? </span></h2>
            <p><span >laat me <strong>weten</strong><br > wat ben jij?</span></p>
          <div >
 
         <div >   
            <button  href="https://www.werkenbijml.nl/job-dashboard">Ben jij enn werknemer?</button>
         </div>
         <span>
         </span>
         <div>
             <button  href="https://www.ml-service.nl/">Ben jij een werkgever?</button>
         </div>
          </div>
        </div>
      </div>
    </div>
    </html>

    <style>
.popup-blackout_1{
  position: fixed;
  background: #000;
  display: block;
  opacity: .0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
}

.popup-body_1 {
  width: 75%;
  max-width: 800px;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 0 auto;
  background: #e0e6eb;
  border-radius: 20px;
  z-index: 250;
}
.product-image_1{
  border-top-left-radius: 25px;
  border-bottom-left-radius:25px;
}
.popup-content_1{
  margin-top:15%;
}
.popup-wrapper_1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 300px;
  box-shadow: 0px 0px 68px -2px rgba(59, 59, 59, 0.5);
  border-radius: 20px;
}

.popup-x_1 {
      font-size: 30px;
    color: white;
    opacity: 1;
    text-align: center;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 300;
    padding: 1px;
    margin: 5px;
}

.popup-wrapper_1 .popup-image_1 {
  width: 100%;
  height: 180px;
  margin-left: -10px;
  margin-top: -22px;
  margin-bottom: -20px;
  display: block;
  
}
.popup-image_1{
    
    overflow: hidden;
    margin: 0px!important;
    background-repeat: no-repeat;
  
  
}
.popup-wrapper_1 .sign-up_1 {
  width: 100%;
  padding: 12px 25px;
}

.popup-wrapper_1 .sign-up_1 p {
  color: #4f708d;
  text-align: center;
}

.popup-wrapper_1 .sign-up_1 .popup-title_1{
  font-size: 2em;
  line-height: 1.2em;
  font-weight: 900;
}

.popup-wrapper_1 .sign-up_1 .popup-subtitle_1{
  font-size: 1.2em;
  font-weight: 500;
}

.popup-wrapper_1 .sign-up_1 .popup-pc_1 {
  display: none;
}

.popup-wrapper_1 .sign-up_1 form {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.popup-wrapper_1 .sign-up_1 form input[type="submit"] {
  margin-bottom: -25px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  font-size: 1.1em;
  background: #4f708d;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(82, 82, 82, 0.2);
}
  
  
.custom-btn_1 {
  margin-bottom: -25px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  font-size: 1.1em;
  background: #4f708d;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(82, 82, 82, 0.2);
}
.submit-shop_2{
    margin-bottom: 5px;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
  font-size: 1.1em;
  background: #4f708d;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  box-shadow: 0px 0px 10px 0px rgba(82, 82, 82, 0.2);
}
  
.content-cont1_1{
  color:#34B0B0;
 margin:25px;
}
.popup-content_1 input{
      padding: 10px 30px;
    border: none;
    border-radius: 10px;
    background-color: aliceblue;
}

.popup-wrapper_1 .sign-up_1 form input[type="submit"]:hover {
  background: #85a3bb;
  cursor: pointer;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1, 
.popup-wrapper_1 .sign-up_1 .popup-nospam_1 {
  font-weight: 300;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1 {
  text-align: center;
  padding: 30px 0 18px 0;
  font-size: 14px;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1 a {
  text-decoration: none;
  color: #8a8a8a;
  letter-spacing: .8px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks_1 a:hover {
  color: #4f708d;
  font-weight: 400;
}

.popup-wrapper_1 .sign-up_1 .popup-nothanks a:after {
  content: '';
  display: block;
  background: #8a8a8a;
  height: 1px;
  max-width: 75px;
  width: 100%;
  margin: 0 auto;
  margin-top: 3px;
}

.popup-wrapper_1 .sign-up_1 .popup-nospam_1 {
  font-size: 10px;
  color: #4f708d;
  font-size: 11px;
  line-height: 15px;
}

.popup-wrapper_1 .sign-up_1 .popup-nospam_1 a {
  text-decoration: none;
  color: #4f708d;
  font-weight: 900;
}

.popup-wrapper_1 .sign-up_1 .popup-nospam_1 span {
  color: #535353;
  text-decoration: underline;
}

.popup-wrapper_1 .sign-up_1 .popup-success_1 {
  padding: 10px 0;
  margin: 0;
  color: #666;
}

.popup-wrapper_1 .sign-up_1 #pupcode {
  height: 30px;
  padding: 5px 15px;
  margin: 0;
  font-size: 1.4em;
  color: black;
  background: rgba(255,255,255,.4)
}

.popup-wrapper_1 .sign-up_1 .code-wrapper_1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
}

.popup-wrapper_1 .sign-up_1 .clipboard_1 {
  background: rgba(255,255,255,.4);
  color: #4f708d;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  display: block;
  cursor: pointer;
}

.popup-wrapper_1 .sign-up_1 .popup-toast_1 {
  display: block;
  width: 0px;
  height: 30px;
  margin: auto;
  margin-top: -30px;
  background: #4f708d;
  text-align: center;
  opacity: .9;
  line-height: 28px;
  color: #fff;
  transform: translateX(-15px);
  transition: all ease .3s;
  overflow: hidden;
  border-radius: 20px;
}

.popup-wrapper_1 .sign-up_1 .popup-toast.active {
  width: 120px;
}

@media(max-width: 539px) {
  .content-cont1_1 {
    position: relative;
    top: 0px;
    text-align: -webkit-center;
    margin-top: 10px;
    font-size:1.7em;
  }
  .content-cont2_1 {
    position: relative;
    top: 47px;
  }
  .content-cont3_1 {
    position: relative;
    top: 16px;
  }
  .popup-content_1 input {
    margin-top: 20px;
  }
 
  
  
  .sign-up_1 p{
    margin:0px 40px;
  }
  .sign-up_1{
    padding:0px!important;
  }
  .popup-wrapper_1{
    min-height:475px!important;
  }
  
}
  
@media(min-width: 540px) {
  .popup-image_1{
    width:50%;
  }
  .sign-up_1{
    width:50%;
  }
  
  .popup-wrapper_1 {
    flex-direction: row;
  }
  .popup-wrapper_1 .popup-image_1 {
    height: auto;
    width: auto;
    margin-top: 0px;
    margin-left: 0;
    margin-bottom: 0;
    object-fit: cover;

    
  
  }
  .submit-shop_1{
    width:80%!important;
    margin-bottom:5%;
  }
  .sign-up_1 h2{
    text-align:center;
  }
  .popup-content_1 input{
    width: 55%;
    padding: 10px 23px;
  }
  .popup-wrapper_1 img{
    width:100%;
    height:100%;
  }
  .popup-wrapper_1 .sign-up {
    width: 50%;
  }
  
  
  
}
@media(max-width:405px){
  
  .content-cont1_1{
    margin-bottom:10px;
  }
  .submit-shop_1{
    margin:0px 0px 25px 0px;
  }
  
}

@media(min-width: 700px) {
  .popup-wrapper_1 .popup-image_1 {
    width: calc(47%   20px);
    margin-top: -20px;
    
  }
  .popup-wrapper_1 .sign-up_1 {
    width: 53%;
  }
}
  


  
.discount-code_1 {
    font-size: 37px !important;
    background-color: #50B8E7 !important;
    color: white !important;
    cursor: pointer;
}
  
.popup-content_1 {
    width: 100%;
  text-align: center;
 
  
}
  .submit-shop_1 {
    color: white !important;
    width: 215px;
    display: inline-block;
    cursor: pointer;
    text-transform: capitalize; 
    background-color: #34B0B0;
  }


/*Tooltip*/
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
    </style>

    <script>

var modalbanner = document.getElementById("popup-show_1");

var spanbanner = document.getElementsByClassName("popup-x_1")[0];

setTimeout(function () {
    modalbanner.style.display = "block";
    console.log("modal initiated");
}, 10000);

spanbanner.onclick = function () {
    modalbanner.style.display = "none";
    console.log("closed banner");
}

spanbanner.onclick = function (event) {
    if (event.target == modalbanner) {
        modalbanner.style.display = "closed banner";
    }
}
    </script>

CodePudding user response：

The second onclick() is causing the modal to not close like pistevw said.
The button is inside the block that is hidden hence cant be clicked after functions runs, Place the button outside.
To toggle style you can use css classList toggle or use a global variable and toggle it.

var modal_open = true;
spanbanner.onclick = () => {
  modalbanner.style.display = modal_open?'none':'block';
  modal_open=!modal_open
  console.log((modal_open?'opened':'closed') ' banner');
};