Popup Div на весь сайт?(При первой загрузке страницы)

Question

Вместо того, чтобы создавать начальную страницу, я пытаюсь отобразить div на всем веб-сайте, который будет иметь фоновое изображение, некоторый текст, обратный отсчет и кнопку выхода.Есть ли способ отобразить этот div только определенное количество раз для IP-адреса?Таким образом, он загружается один раз. Div будет выглядеть примерно так:

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

Есть ли какой-нибудь скрипт jQuery, на который я должен посмотреть, чтобы сделать что-то подобное?

Answer 1

Мне нравится делать это так:

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 Вышесказанное - это то, что я легко использую для создания лайтбокса. Что касается обратного отсчета и таймера, который немного отличается.

JQuery:

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

(От: Как мне сделать обратный отсчет jQuery )

Answer 2

Вам потребуется отобразить div и затем установить cookie, чтобы указать, что вы посетили страницу ...

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

Затем, когда вы в следующий раз посетите страницу, проверьтеесли cookie существует и (если он существует), не показывать оверлей div.

Answer 3

Если я правильно вас понимаю, то вам может понадобиться что-то вроде модального диалога JQuery.Взгляните сюда

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

Answer 4

Вы можете использовать функцию setTimeout или задержку function. Вы можете скрыть свой div после определенного времени

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

Answer 5

Посмотрите на Reveal - http://www.zurb.com/playground/reveal-modal-plugin