Show popup after page load


Tags: javascript,jquery,html,css,popup

Problem :

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?

Javascript-

<script type="text/javascript">
function PopUp(){
        document.getElementById('ac-wrapper').style.display="none"; 
}
</script>

CSS-

#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;
}

HTML-

 <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>


Solution :

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
});

    CSS Howto..

    Anyone know how Atlassian sizes the height of the splitter div in Confluence?

    CSS: How to attach an arrow to a div and make it overlap the border

    How do I change the display position from absolute to relative?

    How do I apply padding or a margin to this heading displayed as a table-cell?

    When I hover left/right side of a div how do I display previous/next button (using CSS/jQuery)

    how to set css and html in textarea [closed]

    jquery image preview on hover - how to set fixed position?

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    How can I overlap 2 images on image product in Magento?

    how to create a fullscreen website design?

    How to expand my CSS3 menu and reduce its width

    HTML divs, how to wrap content?

    How to change CSS id property depending upon screen size

    How to override a templates default option with javascript and css

    How to select ids which contain special characters?

    How to add a border to only percentage of width of element, CSS Trick

    How to display random parts of a page on refresh?

    How to put a space in front of a next line [closed]

    How to auto adjust wrapper height when padding is applied to inner elements

    How to use body horizontal scrollbar in free jqgrid

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    How to edit CSS class via jQuery if statement

    Need the background to change when the mouse goes over the selected tab. How?

    How to make a central background over the page in HTML/CSS?

    How to make div size bigger?

    Css Trick - How to align this div

    How to fix image to bottom right in gallery

    How to place an element in top of another using CSS (without using absolute position)?

    How to get the min-height of the object when its parent is set to display none?

    How to prevent javascript and css messing up?