Is it possible to somehow set a timer for this plug-in pop-up window so that when a user came to the page, for example, the script worked for 2 seconds and not by clicking
<header><h2>animatedModal.js</h2></header> <section> <p><b>animatedModal.js</b> is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from <a href="https://daneden.imtqy.com/animate.css/" target="_blank">animate.css</a> or create your own transitions.</p> <center> <b>DEMOS</b> <a id="demo01" href="#animatedModal">01</a> <a id="demo02" href="#lightSpeedIn">02</a> <a id="demo03" href="#teste">03</a> <p>1 <b>animatedIn</b>: 'zoomIn', <b>animatedOut</b>: 'bounceOut'</p> <p>2 <b>animatedIn</b>: 'lightSpeedIn', <b>animatedOut</b>: 'bounceOutDown'</p> <p>3 <b>animatedIn</b>: 'bounceIn', <b>animatedOut</b>: 'bounceOut'</p> </center> <p>To more info visit <a href="https://joaopereirawd.imtqy.com/animatedModal.js/" target="_blank">here</a></p> <div id="animatedModal"> <div id="lightSpeedIn"> <div class="close-lightSpeedIn"><span class="fa fa-close"></span></div> <div class="modal-content"> <div class="thum"> </div> </div> </div> </section> CSS
body { background: #FFF; color: #E74B3D; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; margin: 0; text-align: center; } a { color: #888; text-decoration: none; } a:hover { color: #39BEB9; text-decoration: underline; } header { background: #E74B3D; color: #FFF; margin: 0 auto; padding: 4em 0; overflow: hidden; } p { color: #444; font-size: 18px; padding: 10px; text-align: center; } center { display: block; margin: 0 auto; padding: 40px 0; } center > a, center > a:hover { background: #E74B3D; border-radius: 100%; color: #FFF; display: inline-block; font-size: 1.65em; margin: 6px; padding: 20px; text-decoration: none; text-transform: uppercase; } center > b { display: block; padding: 1em 1em 2em; } center p { font-size: 13px; margin: 10px auto 0; padding: 0; } section { margin: 1em auto; max-width: 680px; } .modal-content { display: block; margin: 2em auto; max-width: 1000px; padding: 10px; } [class*="close-"] { border: 2px solid; border-radius: 100%; color: #FFF; cursor: pointer; display: block; font-size: 1.75em; height: 50px; line-height: 50px; margin: 1em auto; overflow: hidden; padding: 0; position: relative; width: 50px; } .thum { display: block; overflow: hidden; position: relative; text-align: center; width: initial; } .thum img { display: inline-block; margin: 0 2px 2px; width: 48%; -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; transition: all .45s ease-in-out; } @media only screen and (min-width: 1024px) { .modal-content { padding: 0; } .thum img { width: 32%; -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; transition: all .45s ease-in-out; } } @media only screen and (max-width: 340px) { .thum img { display: block; margin: 0 auto 8px; width: 100%; -webkit-transition: all .45s ease-in-out; -moz-transition: all .45s ease-in-out; transition: all .45s ease-in-out; } } jQuery
$(document).ready(function() { //demo 02 $("#demo02").animatedModal({ modalTarget: 'lightSpeedIn', animatedIn: 'lightSpeedIn', animatedOut: 'bounceOutDown', color: '#39BEB9', beforeOpen: function() { var children = $(".thumb"); var index = 0; function addClassNextChild() { if (index == children.length) return; children.eq(index++).show().velocity("transition.slideRightIn", { opacity: 1, stagger: 450, defaultDuration: 100 }); window.setTimeout(addClassNextChild, 100); } addClassNextChild(); }, afterClose: function() { $(".thumb").hide(); } }); }); // end document ready 
