Question

我正在使用animatedModal.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 Documentation

试试这个

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

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

});

<强> Demo Here

Answer 2

您可以使用.on方法指定点击关闭按钮时要执行的操作，例如显示内容。要隐藏内容，您最初可以使用style =＆＃39; display：none;＆＃39;在包含内容。

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/

如果这回答了您的问题，请将此标记为已接受的答案。

在页面加载时打开模态

2 个答案: