3

I created a jQuery popup by following an online tutorial.

I want to show this popup after page load/after page load it appears + how to code it as like it appears after 5 second of page load.

Due to my low knowledge on jQuery I am not able to make it work as of my requirements.

Any idea how to do it?

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>

<p>Page Content Here......</p>

3
  • 2
    Use the Jquery ui one, this has a setting that will do all this for you.
    – Liam
    Oct 31, 2013 at 13:04
  • put your code in $(document).ready() function and remove the onclick from input textbox.. check my answer
    – nrsharma
    Oct 31, 2013 at 13:19
  • The "uposonghar.com/popup.html" is a phishing link
    – J.S.Orris
    Apr 7, 2015 at 23:10

7 Answers 7

10

When the DOM is finished loading you can add your code in the $(document).ready() function.

Remove the onclick from here:

<input type="submit" name="submit" value="Submit" onClick="PopUp()" />

Try this:

$(document).ready(function(){
   setTimeout(function(){
      PopUp();
   },5000); // 5000 to load it after 5 seconds from page load
});
3
  • 1
    Missing a bracket "(" after setTimeout. Should be setTimeout( function(){ PopUp(); }, 5000); I tried to edit, but can't edit with only one character. Jul 12, 2016 at 0:03
  • can plz help me for how to dismiss popup window html loading when page loads
    – user94
    Dec 30, 2019 at 6:31
  • why my modal popup window loading when page loads
    – user94
    Dec 30, 2019 at 7:03
6

try something like this

<script type="text/javascript">
function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
    else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 5000);
}
</script>

and your html

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

Demo JsFiddle

3
  • why my modal popup window loading when page loads
    – user94
    Dec 30, 2019 at 7:04
  • @user94 , because the question asked for modal to show when page loads. removing the window.onload part should prevent it from loading on page load.
    – th1rdey3
    Dec 30, 2019 at 7:27
  • thankyou..i have one more issue.. iam using slick silder vertical and i add a read more button in that.. but its not working
    – user94
    Dec 30, 2019 at 10:16
1
  <script type="text/javascript">
  jQuery(document).ready(function(){
         setTimeout(PopUp(),5000); // invoke Popup function after 5 seconds 
  });
   </script>
1
  • why my modal popup window loading when page loads
    – user94
    Dec 30, 2019 at 7:04
1
    <script type="text/javascript">
        $(window).on('load',function(){
            setTimeout(function(){ alert(" //show popup"); }, 5000); 
        });
    </script>
1
  • 2
    While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation May 16, 2020 at 20:40
1

Use this below code to display pop-up box on page load:

$(document).ready(function() { 
  var id = '#dialog';
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $('#mask').css({'width':maskWidth,'height':maskHeight}); 
  $('#mask').fadeIn(500); 
  $('#mask').fadeTo("slow",0.9); 
        var winH = $(window).height();
  var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);
     $(id).fadeIn(2000);  
     $('.window .close').click(function (e) {
  e.preventDefault();
  $('#mask').hide();
  $('.window').hide();
     });  
     $('#mask').click(function () {
  $(this).hide();
  $('.window').hide();
 });  
 
});

<div class="maintext">
<h2> Main text goes here...</h2>
</div>
<div id="boxes">
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window"> 
<div id="san">
<a href="#" class="close agree"><img src="close-icon.png" width="25" style="float:right; margin-right: -25px; margin-top: -20px;"></a>
<img src="san-web-corner.png" width="450">
</div>
</div>
<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> 
0

You can also do this much easier with a plugin called jQuery-confirm. All you have to do is add the script tag and the style sheet they provide in your page

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/jquery-
confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
confirm/3.3.0/jquery-confirm.min.js"></script>

And then an example of calling the alert box is:

   <script>
        $.alert({
    title: 'Alert!',
    content: 'Simple alert!',
     });
1
  • why my modal popup window loading when page loads
    – user94
    Dec 30, 2019 at 7:04
0

If you don't want to use jquery, use this:

<script>
 // without jquery
document.addEventListener("DOMContentLoaded", function() {
 setTimeout(function() {
  // run your open popup function after 5 sec = 5000
  PopUp();
 }, 5000)
});
</script>

OR With jquery

<script>
  $(document).ready(function(){
   setTimeout(function(){
   // open popup after 5 seconds
   PopUp();
  },5000);  
 });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.