how to open a modal after 3 min on page load?

Question

code:

 .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }.modalDialog:target { opacity:1; pointer-events: auto; }.modalDialog > div { width: 270px; position: relative; margin: 5% auto; padding: 5px 20px 13px 20px; background: orange; }.close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }.close:hover { background: #00d9ff; }

 <a href="#contact">enquire</a> <div id="contact" class="modalDialog"> <a href="#close" title="Close" class="close">X</a> <p>Thanks For Visiting Us</p> <form method="post"> <input type="text" name="name" id="name" placeholder="Enter Your Name" /> <input type="text" name="email" id="email" placeholder="Enter Your Email" /> <input type="text" name="phone" id="phone" placeholder="Enter Your Phone" /> <input type="text" name="message" id="message" placeholder="Enter Your Message" /> <input type="submit" name="submit" id="submit" value="Submit"> </form> </div>

In this code I have created a popup modal when I click on enquire link popup will open perfectly but now I want to open popup modal after 3 min on page load. So, How can I do this? please help.

Thank You

Answer 1

You can delay animation by using : animation-delay: 180s; . You may need to use keyframe as well.

 $('.button').click(function(){ $('.modalDialog').addClass('show'); }); 

 .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; transition: opacity 400ms ease-in; pointer-events: none; opacity: 0; animation: show_modal 400ms forwards; animation-delay: 4s; } .modalDialog.show { opacity: 1; animation: none; } @keyframes show_modal { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button">Show</button> <div class="modalDialog">Modal</div> 

Answer 2

You can use setTimeout() function to achieve it

Try This:-

 $(document).ready(function(){ setTimeout(function(){ $('#contactModalBtn').trigger('click'); },3000); }); $('#contactModalBtn').click(function(){ window.location.hash = $(this).attr('href'); }); 

 .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 270px; position: relative; margin: 5% auto; padding: 5px 20px 13px 20px; background: orange; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="contactModalBtn" href="#contact">enquire</a> <div id="contact" class="modalDialog"> <a href="#close" title="Close" class="close">X</a> <p>Thanks For Visiting Us</p> <form method="post"> <input type="text" name="name" id="name" placeholder="Enter Your Name" /> <input type="text" name="email" id="email" placeholder="Enter Your Email" /> <input type="text" name="phone" id="phone" placeholder="Enter Your Phone" /> <input type="text" name="message" id="message" placeholder="Enter Your Message" /> <input type="submit" name="submit" id="submit" value="Submit"> </form> </div> 

Answer 3

 $(window).load(function(){ setTimeout(function () { $("#contact").show(); }, 3000); }); 

  .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; display:none; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 270px; position: relative; margin: 5% auto; padding: 5px 20px 13px 20px; background: orange; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } 

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> </head> <body> <a href="#contact">enquire</a> <div id="contact" class="modalDialog"> <a href="#close" title="Close" class="close">X</a> <p>Thanks For Visiting Us</p> <form method="post"> <input type="text" name="name" id="name" placeholder="Enter Your Name" /> <input type="text" name="email" id="email" placeholder="Enter Your Email" /> <input type="text" name="phone" id="phone" placeholder="Enter Your Phone" /> <input type="text" name="message" id="message" placeholder="Enter Your Message" /> <input type="submit" name="submit" id="submit" value="Submit"> </form> </div> </body> </html> 

I have put 3000ms for timeout. Please change it to 180000. for 3min time delay.

Answer 4

 $(window).on('load',function(){ setTimeout(function(){$('#contact').modal('show'); },180000) });

 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="contact" class="modalDialog"> <a href="#close" title="Close" class="close">X</a> <p>Thanks For Visiting Us</p> <form method="post"> <input type="text" name="name" id="name" placeholder="Enter Your Name" /> <input type="text" name="email" id="email" placeholder="Enter Your Email" /> <input type="text" name="phone" id="phone" placeholder="Enter Your Phone" /> <input type="text" name="message" id="message" placeholder="Enter Your Message" /> <input type="submit" name="submit" id="submit" value="Submit"> </form> </div> </body> </html>

You can also try this

setTimeout() method execute code after the specified time.

setTimeout(function, milliseconds);

 $(window).on('load',function(){ setTimeout(function(){$('#your_model_id').modal('show'); },180000) });