Как вызвать всплывающее окно с помощью функции onload?

#javascript #jquery #popup

#javascript #jquery #всплывающее окно

Вопрос:

Я пытаюсь установить всплывающее окно на своем сайте, и я получил пример. Всплывающий файл с помощью функции click, но я хочу запустить это всплывающее окно при загрузке страницы. Вот функция всплывающего окна

HTML :

 <a class="btn" data-popup-open="popup-1" href="#">Popup </a>

<div class="popup" data-popup="popup-1">
<div class="popup-inner">
    <h2>Wow! This is Awesome! (Popup #1)</h2>
    <p>Popup text </p>
    <p><a data-popup-close="popup-1" href="#">Close</a></p>
    <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>

jQuery :

 $('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="'   targeted_popup_class   '"]').fadeIn(350);

    e.preventDefault();
});

Кто-нибудь может мне помочь, пожалуйста…..

1. В настоящее время вы запускаете это, нажимая на что-либо. Как вы думаете, что произойдет, если вы переместите этот код за пределы обработчика кликов?

2. Я хочу запустить всплывающее окно при загрузке страницы

3. Вы даже не обратили внимания на то, что я сказал.

4. Код будет выполнен без щелчка

5. Да. И … предполагая, что вы разместили этот код в нижней части страницы, когда этот код выполняется?

Ответ №1:

https://api.jquery.com/ready/

 $(document).ready(function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="'   targeted_popup_class   '"]').fadeIn(350);
});

Редактировать: удалено e.preventDefault();

Редактировать: исправлены упущенные проблемы, из-за которых приведенный выше код не работал.

Вы могли бы просто присвоить своему div идентификатор popup-1 и получить к нему прямой доступ.

 $(document).ready(function()  {
    $('#popup-1').fadeIn(350);
});

1. Определение не работает. Всплывающее окно не появляется? Вы получаете сообщение об ошибке?

2. Вы должны добавить jQuery

3. @DropShadow Да ладно, они не просто преподносят вам решение на блюдечке с голубой каемочкой. Немного подумайте сами.

4. Вам не нужен e.preventDefault() . Это просто для обработки таких вещей, как события нажатия. Я думаю, что в этом случае это действительно вызовет ошибку.

5. Другая вещь — эта строка var targeted_popup_class = jQuery(this).attr('data-popup-open'); . Поскольку this это не будет элемент, на который нажимают, им нужно вручную установить для него что-то вроде popup-1 или найти это значение где-нибудь в DOM.

Ответ №2:

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

     <div class="modal fade in" id="mydiv" tabindex="-1" role="dialog"  style="display: block; aria-hidden="false">
            <div class="modal-dialog">            
                <div class="modal-content"> 
                    <div class="modal-header">
                       <div class="popup" data-popup="popup-1">
                          <div class="popup-inner">
                          <h2>Wow! This is Awesome! (Popup #1)</h2>
                          <p>Popup text </p>
                          <p><a data-popup-close="popup-1" href="#">Close</a></p>
                          <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
                       </div>
                    </div>
            </div>
    </div>

    $(document).ready(function(e)  {
       $("#mydiv").modal('show');
    });

а также нажатие кнопки

 <a class="btn" data-popup-open="popup-1" href="#" data-toggle="modal" data-target="#mydiv">Popup </a>

Я не видел здесь никакого неправильного кода, но почему нажал, бесполезно.