Как создать модальное время задержки (желательно с использованием HTML, JQuery, CSS) - PullRequest
Новая
       80

Как создать модальное время задержки (желательно с использованием HTML, JQuery, CSS)

0 голосов
/ 29 апреля 2018

Я хочу создать 5-секундную модальную задержку, как это

enter image description here

Я много гуглил и исследовал, но застрял при создании такого модала, который не запускается кнопкой. Я пытался следовать инструкциям (используя только javascript) из W3Schools https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp и https://www.w3schools.com/howto/howto_css_modals.asp, но ничего не работает. И оба запускаются кнопкой.

Я не знаю, так ли это, потому что я использую коды JQuery для перышка и слайдера. Я также пытался следить за сайтом https://www.sitepoint.com/show-modal-popup-after-time-delay/, но ничего не появляется. Я буду признателен за то, что кто-то может помочь и предоставить мне соответствующие коды scripts / css / js, так как я довольно новичок в кодировании. Большое вам спасибо! 

<div class="modal">
            <div class="modal-content">
            <span class="closebtn">&times;</span>
            <h4>WELCOME</h4>
            <label for="email">Don't miss out on the latest updates!</label>
            <input placeholder="enter your email here" id="email">
            <button class="subscribe">SUBSCRIBE</button>
            </div>
        </div>

Я также пытался использовать http://jquerymodal.com/, но он не работает с кнопки, и я не знаю, как использовать это с функцией settimeout без использования кнопки для запуска модального окна.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

Предполагая, что вам нужен модал, который будет автоматически скрываться или исчезать по истечении определенного времени ожидания, вот вам JsFiddle , который это делает. 

$(document).ready(function(){
  $('#modal').click(function(){
    $('#exampleModal').modal('show');
     setTimeout(function() {$('#exampleModal').modal('hide');}, 
      1000);
    }); 
  });

РЕДАКТИРОВАТЬ :: Если вы хотите, чтобы ваш модал загружался при загрузке страницы (не вызывается кнопкой), вы можете просто сделать: 

$(document).ready(function(){           
  $('#exampleModal').modal('show');
    setTimeout(function() {$('#exampleModal').modal('hide');}, 
          1000);
   });
0 голосов
/ 29 апреля 2018

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

В основном эти модальности используются для отображения новостных рассылок или любых скидок, предлагаемых сайтом

Код на справочном сайте выглядит хорошо

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

...