Как автоматически закрыть всплывающее окно fancybox / lightbox / ... через x секунд? - PullRequest
Новая
       49

Как автоматически закрыть всплывающее окно fancybox / lightbox / ... через x секунд?

2 голосов
/ 25 февраля 2012

У меня есть тестовый веб-сайт (index.html), который открывает всплывающее окно (popup.html) и закрывает его через три секунды.Вот глава index.html: 

<script language="javascript" type="text/javascript">
function popup(url) {
    newwindow=window.open(url,'name','height=70,width=300');
    if (window.focus) {newwindow.focus()}
    return false;
}
</script>

Вот тело index.html: 

<a href="#" onClick="return popup('popup.html')">Open in pop-up</a>

Вот глава popup.html: 

<script>
    var howLong = 3000;
    t = null;
    function closeMe(){
        t = setTimeout("self.close()",howLong);
    }
</script>

Вот тело файла popup.html: 

<body onLoad="closeMe();self.focus()">
<p>Closing in 3 seconds</p>
</body>

Я хотел бы показать это всплывающее окно, используя linghtbox / fancybox / what ... и снова закрыть его через 3 секунды. Какмогу ли я сделать это?Я перепробовал все что угодно, но ничего не получалось.Какой самый простой способ реализовать это?

Заранее спасибо!

Ответы [ 3 ]

7 голосов
/ 26 февраля 2012

Вы можете использовать Fancybox ( версия 1.3.x или версия 2.x ), чтобы открыть внешний документ html и закрыть его через несколько секунд.

Для fancybox v1.3.x ваш html должен выглядеть следующим образом: 

<a href="page.html" class="fancybox">open fancybox and close it automatically after 3 seconds</a>

и скрипт: 

$(document).ready(function() {
 $(".fancybox").fancybox({
  'width': 640, // or whatever
  'height': 320,
  'type': 'iframe',
  'onComplete': function(){
    setTimeout( function() {$.fancybox.close(); },3000); // 3000 = 3 secs
  }
 });
}); // ready

Для fancybox v2.x , html (обратите внимание на class): 

<a href="page.html" class="fancybox fancybox.iframe">open fancybox and close it automatically after 3 seconds</a>

и скрипт: 

$(document).ready(function() {
 $(".fancybox").fancybox({
  width: 640, // or whatever
  height: 320,
  afterLoad: function(){
   setTimeout( function() {$.fancybox.close(); },3000); // 3000 = 3 secs
  }
 });
}); // ready
1 голос
/ 20 ноября 2014

onComplete или afterLoad у меня не работает, поэтому я добавил ниже код на родительской странице 

window.closeFancyBox = function () {
        $.fancybox.close();
};

и со всплывающей страницы я звоню ниже кода

$(window).load(function(){ setTimeout( function() {window.parent.closeFancyBox(); },3000); // 3000 = 3 secs });

0 голосов
/ 29 июля 2016

создайте функцию для закрытия всех посторонних загрузок fancybox и установите время ожидания для этой функции. 

$(document).ready(function () {
   closefancybox();
});

function closefancybox() {
    $.fancybox({
        afterLoad: function () {$.fancybox.close();}
    });
    setTimeout(function () { closefancybox(); }, <time_inter>);
}
...