在頁面加載時打開模態

Question

我正在使用 animationModal.js 在我的頁面上顯示全屏模式。 它工作正常並通過單擊按鈕觸發。

但是，我需要它在用戶進入網站后自動打開，也就是說，它需要在主頁內容之前打開。

這是標記：

<!-- MODAL STARTS -->
<a id="demo01" href="#animatedModal">DEMO01</a>
    <div id="animatedModal">
        <div class="close-animatedModal"> 
            CLOSE MODAL
        </div>
        <div class="modal-content">
        </div>
    </div>

<!-- PAGE CONTENT -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

它是由

$("#demo01").animatedModal();

小提琴可以在https://jsfiddle.net/5zLe3npu/找到

在內容之前首先顯示它的最佳解決方案是什么？ 我是一個 JS 新手，對於可能很愚蠢的問題很抱歉。

Answer 1

使用trigger() API 文檔

嘗試這個

$("document").ready(function() {

        $("#demo01").animatedModal();
        $("#demo01").trigger('click');

});

演示在這里

Answer 2

您可以使用 .on 方法指定單擊關閉按鈕時要執行的操作，例如顯示內容。 並且最初隱藏內容你可以使用 style='display:none;' 在一個包含內容。

HTML -

<!-- MODAL STARTS -->
<div id="animatedModal">
    <div class="close-animatedModal"> 
        CLOSE MODAL
    </div>
    <div class="modal-content">
    </div>
</div>

<!-- PAGE CONTENT -->
<div id='container' style='display:none;'>

    <a id="demo01" href="#animatedModal">DEMO01</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

</div>

jQuery -

$("#demo01").animatedModal(); //initialize animatedModal
$("#demo01").click(); //triggers opening of Modal.
$(".close-animatedModal").on( "click", function() {
    $("#container").show();
});

請參閱 JSFiddle - http://jsfiddle.net/w1gw64aj/

如果這回答了您的問題，請將其標記為已接受的答案。