Модальное окно popup

170
10 мая 2018, 07:13

Хочу сделать PopUp с определенным интервалом, т.е. при открытии страницы появляется PopUp, нажал на крестик, через время опять появился PopUp.

Например, magnificPopUp только при клике:

$(document).ready(function(){
  $('.popup-link').magnificPopup();
});

Kак сделать его, чтобы PopUp через время сам появлялся?

Answer 1

SetInterval - Запускает выполнение функции регулярно повторяет её через указанный интервал времени.

Задержка в миллисекундах, 1000 миллисекунд равны 1 секунде.

Magnific-popup documentation

$.magnificPopup.open - Открыть окно напрямую через API

$.magnificPopup.close - Закрыть всплывающее окно.

$(document).ready(function(){       
   
    setInterval(function() { 
      console.log( "тик" );       
      $('.popup-link').magnificPopup(); 
    }, 1000); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

Update "Open magnific"

$(document).ready(function(){       
    setInterval(function() { 
      jQuery.magnificPopup.open({ 
        items: {src: '.popup-link'}, 
        type: 'inline' 
      });   
      magnificPopupClose(); 
    }, 2000);  
     
    function magnificPopupClose(){ 
      setTimeout(function(){ 
          $.magnificPopup.close();  
      }, 1000); 
    } 
});
*{ 
  color: white; 
  text-align:center; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"> 
 
<div  class="popup-link">Контент</div>

Answer 2

$(document).ready(function(){       
    setTimeout(function(){ // открывается через секунды после загрузки страницы можно удалить строку если надо открытие сразу 
      $.magnificPopup.open({ 
        items: {src: '.popup'}, 
        type: 'inline', 
        callbacks: { 
          close: function() { // как только первый раз закрыли ставим счетчик 
              setTimeout(function(){ // открытие второй раз через 10 секунд после закрытия первого 
                $.magnificPopup.open({ 
                  items: {src: '.popup'}, 
                  type: 'inline', 
                  callbacks: { // колбэк чтобы удалить второе предложение из попапа, чисто для наглядности примера, можно удалить 
                    open: function() { 
                      $('.popup').text('Кликните по фону для закрытия.');  
                    }, 
                  } 
                });   
              }, 10000); // 10 секунд 
          } 
        } 
      });   
    }, 1000); // 1 секунда задержки, можно удалить строку если надо открытие сразу 
});
* { 
  color: white; 
  text-align:center; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"> 
 
<div class="popup">Кликните по фону для закрытия. <br/>Через 10 секунд откроется повторно.</div>

READ ALSO
Текст цитаты обрывается

Текст цитаты обрывается

Проблема в том, что длинные цитаты обрываются на 66м знакеВообще нет догадок, что может оказаться причиной

159
Nunjucks отличия от ninja2

Nunjucks отличия от ninja2

Подскажите, в чем кардинально разнится Nunjucks в сравнении с ninja2 ? Можно синтаксически впилить код написанный на ninja2 в код с проектом на Nunjucks?

123
jquery: события на уничтоженных объектах

jquery: события на уничтоженных объектах

подскажите пожалуйста, если я на какой-то объект подвесил событие

185
Не могу подключиться к socket.io с помощью Ruby

Не могу подключиться к socket.io с помощью Ruby

Помогите разобраться с socketio

202