打开页面加载模式

我正在使用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新手，所以很抱歉可能愚蠢的问题。

来源

2015-09-28 Torca Vino

你可以使用。对方法指定做什么上单击关闭按钮，如显示内容。为了隐藏内容，您可以使用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/

如果这个回答你的问题，请注明这是公认的答案。

来源

2015-09-28 13:07:46

嘿，明智的！这正是我正在寻找的，但我不能让它在我的最终工作正常（再次，我真的是一个jquery新手），有没有机会可以帮助我？ https://jsfiddle.net/5zLe3npu/2/ Ofcourse，标记为接受，谢谢一堆！ –

根据文档http://learn.jquery.com/events/triggering-event-handlers/#trigger-vs-triggerhandler-不建议触发事件。最好的方法是将打开对话框的代码封装到一个函数中，并将它用作事件分配和直接执行。 – anmarti

没问题@TorcaVino。我更新了你的JSFiddle。 https://jsfiddle.net/5zLe3npu/3/ –

使用trigger()API Documentation

试试这个

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

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

});

Demo Here

来源

2015-09-28 12:43:12

它确实自动打开，但主页在加载期间仍然可见。这个想法是，首先加载模式，然后在用户关闭模式后显示主页。是否有延迟打开2-3秒内主内容div的机会？ –

打开页面加载模式

回答

相关问题