在页面加载时打开模态 [英] Opening modal on page load

问题描述

我正在使用animatedModal.js在我的页面上显示全屏模式。
它工作正常并通过点击按钮触发。

但是，一旦用户进入网站，我需要它自动打开，也就是说，它需要在主页面内容之前打开。

这是标记：

 <！ -  MODAL STARTS  - > 
< a id =demo01href =＃animatedModal> DEMO01< / a> 
< div id =animatedModal> 
< div class =close-animatedModal> 
关闭模式
< / 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> 
  

它是由

$ b $触发p> $（ ＃demo01）animatedModal（）;


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

在内容之前首先显示它的最佳解决方案是什么？
我是一名JS新手，对于潜在的愚蠢问题感到抱歉。

解决方案

您可以使用.on方法指定点击关闭按钮可以做什么，例如显示内容。最初要隐藏内容，你可以在包含内容的地方使用style ='display：none;'。

HTML -

 <！ -  MODAL STARTS  - > 
< div id =animatedModal> 
< div class =close-animatedModal> 
关闭模式
< / div> 
< div class =modal-content> 
< / div> 
< / div> 
 
<！ -  PAGE CONTENT  - > 
< div id ='container'style ='display：none;'> 
 
< a id =demo01href =＃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（）; //初始化animatedModal 
 $（＃demo01）。click（）; //触发Modal的打开。 
 $（。close-animatedModal）。on（click，function（）{
 $（＃container）。show（）; 
}）; 
  

请参阅JSFiddle - http://jsfiddle.net/w1gw64aj/

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

I am using a animatedModal.js to display full screen modal on my page. It works properly and is triggered by clicking on a button.

But, instead of that, i would need it to open automatically once the user enters the site, aka, it needs to be opened before the main page content.

This is the markup:

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

And it is triggered by

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

Fiddle can be found at https://jsfiddle.net/5zLe3npu/

What would be the best solution to display it first, before the content? I am a JS newbie so sorry for potentially stupid question.

解决方案

You could use the .on method to specify what to do on-click of the close button, such as showing the content. And to hide the content initially you could just use style='display:none;' on a containing the content.

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

Please see JSFiddle - http://jsfiddle.net/w1gw64aj/

If this answers your question, please mark this as the accepted answer.

这篇关于在页面加载时打开模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！