CODEWITHSUNDEEP
phphtmlcss
omkara
omkara

Reputation: 982

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

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

Upvotes: 1

Views: 2334

Answers (4)

KishanRSojitra
KishanRSojitra

Reputation: 277

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

Upvotes: 0

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

$(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.

Upvotes: 0

j-printemps
j-printemps

Reputation: 1298

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>

Upvotes: 2

Manish Yadav
Manish Yadav

Reputation: 1025

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>

Upvotes: 1

Related Questions