Задержка всплывающего окна на 10 секунд, только один раз - PullRequest
Новая
       22

Задержка всплывающего окна на 10 секунд, только один раз

4 голосов
/ 28 ноября 2011

Привет! Я использую встроенное всплывающее окно fancybox для оповещения о повышении.Код, который я использую для этого: 

$(document).ready(function() {
  $("#various1").fancybox();
});

Как бы я изменил это, чтобы оно автоматически появлялось, скажем, через 20 секунд?Но как только он будет закрыт, он не сможет снова появиться.

Ответы [ 7 ]

18 голосов
/ 29 ноября 2011

На самом деле, ни одно из ранее опубликованных решений не работает в реальной жизни, почему?потому что строка: 

$("#various1").fancybox();

не запускает fancybox, она просто привязывает fancybox к селектору # различным1, но для запуска модального / лайтбокса все равно нужен щелчок (не всплывающее окно).Кстати, решение Gearóid в любом случае имеет синтаксические ошибки.Единственная реальная ценность заключается в том, что они предлагают использовать jQuery cookie-плагин (старый сайт).

EDIT : (07 марта 2012 г.) Плагин jQuery cookie-файловдомашняя страница перенесено сюда .

Шаги для рабочего решения:

A) Загрузите плагин cookie jQuery (как предлагается) после jQuery и jancy файлов fancybox *

B) Затем используйте этот скрипт: 

<script type="text/javascript">
function openFancybox() {
    setTimeout( function() {$('#various1').trigger('click'); },20000);
}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 7 });
    $('#various1').fancybox();
});
</script>

C) вам все еще нужно где-то в вашем HTML-коде (возможно, скрытый) 

<a id="various1" href="path/target"></a>

илидля встроенного содержимого 

<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">message to display in fancybox</div>
</div>

Кроме того, если вы используете встроенное содержимое и fancybox v1.3.x, проверьте наличие ошибки и обходного пути здесь

PS.fancybox - это не всплывающее окно, а модальный / лайтбокс jQuery-плагин, который представляет собой неинтрузивное решение, такое как jGrowl с точки зрения пользовательского интерфейса.

4 голосов
/ 28 ноября 2011 
$(document).ready(function() {
  setTimeout(function () {
    $("#various1").fancybox();
  }, 20000);
});
2 голосов
/ 30 мая 2016 
Use Timeout function. The solution for your query is below
$(document).ready(function () {
setTimeout(function() {
$('your modal id').modal('show')  }, 10000); //displays modal after 10 seconds
});
1 голос
/ 28 ноября 2011

Вы должны использовать setTimeout, чтобы задержать всплывающее окно следующим образом: 

setTimeout("showPopup()",20000);

function showPopup() {
    if (null != $.cookie("offer_closed"))
         $("#various1").fancybox();});
}

Использование библиотеки jQuery cookie , чтобы установить для куки (назовите его что-то вроде "offer_closed") значение trueкогда пользователь нажимает закрыть.Это означает, что всплывающее окно уже отображено.

PS.С точки зрения пользовательского интерфейса, вы должны стараться избегать решений, использующих всплывающие окна.Пользователи ненавидят их. Попробуйте более элегантное решение, например jGrowl.

1 голос
/ 28 ноября 2011

Вы должны использовать для этого функцию delay: 

$("#various1").delay(20000).fancybox();
0 голосов
/ 26 января 2016

См. Пример кода ниже, всплывающее окно откроется через 5 секунд после загрузки страницы с сообщением «Добро пожаловать на сайт» - 

<head>
<script type="text/javascript">
    $(document).ready(function(){

        openFancybox();
        $('#various1').fancybox();
    });
    function openFancybox() {
        setTimeout( function() {$('#various1').trigger('click'); },5000);
    }
</script>
</head>

<body>
<a id="various1" href="#target"></a>
<div style="display: none;">
 <div id="target">welcome to shoesdekho.com</div>
</div>
</body>
0 голосов
/ 28 ноября 2011

Вы можете использовать функцию setTimeout в javascript: 

setTimeout(function() {
    // first wait 20 seconds before this popups
    $("#various1").fancybox();

    setTimeout(function() {
        //.. what to do after 10 seconds
    }, 10000);

}, 20000);

Надеюсь, это то, что вы хотите?Ваше название и объяснение сбивают с толку

...