如何通過onload函數觸發彈出窗口？

Question

我正在嘗試在我的網站中設置一個彈出窗口，我得到了一個例子。 單擊功能彈出文件，但我想在頁面加載時觸發該彈出窗口。 這是彈出功能

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();
});

有人可以幫我嗎.....

Answer 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的ID並直接訪問它。

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

Answer 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>

我在這里沒有看到任何錯誤的代碼，但是為什么單擊沒有用。