Home > Software design >  I can not make the pop up close with the code i am using now. I thought it could maybe wordpress ann
I can not make the pop up close with the code i am using now. I thought it could maybe wordpress ann

Time:08-12

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');
};
  • Related