2

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

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

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

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

2
  • onclick на нажатие крестика, setTimeout, на интервал.
    – Kosta B.
    8 мая 2018 в 19:17
  • спасибо за ответ, пока не понял правда куда вставлять, но постараюсь разобраться =)
    – Victor Kas
    8 мая 2018 в 19:30

2 ответа 2

2

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>

4
  • @VictorKas обновил 8 мая 2018 в 19:57
  • мда, я бы долго это сам писал... спасибо!
    – Victor Kas
    9 мая 2018 в 2:14
  • что такое type: 'inline' ?
    – Victor Kas
    9 мая 2018 в 4:28
  • 1
    @VictorKas type: 'inline' - Тип контента в окне. Параметр плагина. 9 мая 2018 в 18:19
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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.