How can I make this pop up automatic?

Question

My code is

 function PopUp() { document.getElementById('ac-wrapper').style.display = "none"; }

 #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .6); z-index: 1001; } #popup { width: 555px; height: 375px; background: #FFFFFF; border: 5px solid #000; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 150px; left: 375px; }

 <div id="ac-wrapper"> <div id="popup"> <center> <h2>Popup Content Here</h2> <input type="submit" name="submit" value="Submit" onClick="PopUp()" /> </center> </div> </div>

How can I force popup to open automatically 5 seconds after the page opens?

Answer 1

Firstly, don't post code in comments, post it in the original question.

Secondly, you can execute a function (ie 'automatic' as in no user input required), by simply invoking it, PopUp() .

Thirdly, to add a delay, there's the setTimeout(func, delay) function.

Fourthly, adhere to common styling guidelines. Eg,

• single quotes ' instead of " when possible in JS;
• lowercase function names popUp ;
• space before braces in func definitions;
• don't adjust style directly in JS, instead toggle a class.

  function popUp() {
    document.getElementById('ac-wrapper').style.display = 'none';
    // document.getElementById('ac-wrapper').classList.toggle('hidden');
  }
  setTimeout(popUp, 5000);

Answer 2

You can achieve that by Javascript or by CSS with a bit of JS to add a class on click event on the close popup.

//JS

setTimeout(function(){ 
  document.getElementById('ac-wrapper').style.display = 'block';
}, 5000);

//CSS
div {
  opacity: 0;
  pointer-events: none;
  animation-name: showPopup;
  animation-delay: 5s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes mymove {
  from {
   opacity: 0;
   pointer-events: none;
  }
  to {
   opacity: 1;
   pointer-events: auto;
  }
}

div.hidden {
  display: none;
  pointer-events: none; // just to be sure
}