Popup Div Over Entire Website? (On first pageload)

Question

Instead of creating an intro page, I'm trying to display a div over the entire website that will have a background image, some text, and a countdown, and an exit button. Is there a way to display this div only a certain amount of times for an IP address? That way it loads once The div would look something like this.

<div id="divbgimg">
<span id="titletext">text text text</span>
<span id="subtitletext">text text text</span>
<span id="date">10/11/12</span>
<div id="countdown"></div>

Is there any jQuery script I should look at to do something like this?

Answer 1

Have a look at Reveal - http://www.zurb.com/playground/reveal-modal-plugin

Answer 2

If I understand you correctly something like the JQuery Modal Dialog could be what you're after. Take a look here

http://jqueryui.com/demos/dialog/#modal

Answer 3

You can use setTimeout or delay function function. You can hide you div after certain time

setTimeout(function() {
  $('#divbgimg').fadeOut();
}, 1000)//100ms

Answer 4

You would need to display the div and then set a cookie to state that you have visited the page...

http://www.electrictoolbox.com/jquery-cookies/

Then when you next visit the page, check if the cookie exists and (if it does), don't show the div overlay.

Answer 5

I like to do it like this:

HTML:

<div id='lb_background'></div>
<div id='lb_front'>This is where your content will go!<div id="countdown"></div></div>

CSS:

#lb_background {
position: absolute; /*THIS IS REQUIRED!*/
height: 100%;
width: 100%;
background-color: black;
z-index: 1000; /* In front of everything */
opacity: 0.6;
}
#lb_front {
padding: 20px;
z-index: 1001; /* In front of lb_background */
position: absolute;
top: 50px;
}

Jquery:

$('#lb_background').click(function(){
   $('#lb_background, #lb_front').fadeOut(200)
});

EDIT The above is just what I use for creating the lightbox easily. As for the countdown and timer that is slightly different.

JQuery:

$(function(){
  var count = 10;
  countdown = setInterval(function(){
    $("#countdown").html(count + " seconds remaining!");
    if (count == 0) {
      $('#lb_background, $lb_front').fadeOut(200);
    }
    count--;
  }, 1000);
});

(From: How can I make a jQuery countdown )