CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kenzo
Kenzo

Reputation: 377

How do I open this modal on timeout?

I am creating a modal with CSS and HTML, but want to load it after 3 seconds on page load using jquery. I am having a hard time finding the right event handler for this. What is the best way to do this?

Modal below

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script>
</head>
<body>
  <span id="about" class="target"></span>
  <div class="modal">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript 

window.onload = () => {
    setTimeout(() => {
      console.log('time');
    }, 3000);

}

Upvotes: 1

Views: 6310

Answers (4)

JaysnDees.com
JaysnDees.com

Reputation: 1

I like these solutions, but feel I can add more after much mucking around and research. This applies to cases where there are more than a single modal on a particular page. I found that the jquery solutions worked when there was only 1 modal, with the applicable classname. And so, this was my problem: using w3.css, all modals are class=w3-modal. the snippet: $('.w3-modal').show();

My problem: I have more than 1 modal on the page.. This snippet will display all of them.

The solution is to give the modals all their own id - id="id1", id="id2", etc. Then, instead of trying to get it to display via classname (the . in the snippet), we simply grab the modal by id. This is achieved by using a (#) instead of a (.). So: the snippet: $('#id1').show(); or the snippet: $('#id2').show(); n.b. always remember to add the jquery script reference too! This can cause many headaches in itself, especially when you are just still learning lol!

I know this was first answered over 5 years ago, but knowledge is timeless.

Cheers.

Upvotes: 0

hallleron
hallleron

Reputation: 1992

Well I added a class hidden and added it to the modal. Property is a display:none;. After 3 seconds I just remove this by using show():

window.onload = () => {
    setTimeout(() => {
      $('div.modal').show();
    }, 3000);
}
.hidden{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="about" class="target"></span>
  <div class="modal hidden">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

Upvotes: 0

wrayvon
wrayvon

Reputation: 2510

Making a few assumptions, I have hidden the modal via css (inline like your code), then after 3 seconds made it appear:

https://jsfiddle.net/pv7j5qdt/

$(document).ready(function() {
	setTimeout(function(){ 
  	$('.modal').show();
  }, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="about" class="target"></span>
  <div class="modal" style="display: none;">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12161

Here you go with a solution https://jsfiddle.net/7pgrzp7d/

setTimeout(function(){
  $('.modal').modal({show:true});
}, 3000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span id="about" class="target"></span>
  <div class="modal">
    <div class="content" style="height: 425px;  width: 425px;">
      <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2>
      <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p>
      <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p>
      <a class="close-btn" href="#start">X</a>
      <button class="cart-button" style="width: 189px;height: 49px;"> 
        View Cart</button>
     </div>
 </div>
 <div class="page-container">
   <p><a href="#about">Open Modal Window</a>
 </div>

window.onload = () => {
  setTimeout(() => {
    $('.modal').modal({show:true});
  }, 3000);
}

Hope this will help you.

Upvotes: 2

Related Questions