Show modal after 3 seconds with Bootstrap

Show modal after 3 seconds with Bootstrap 4 | Ventana modal se muestra después de 3 segundos con Bootstrap 4.

By Ketan

DEMO
HTML

<div class="text-center"><div class="text-center"> <a class="btn btn-primary" data-toggle="modal" href='#susbc-form'>Click Here To View Modal</a> <p class="mt-3">OR Wait for 3 secound to check modal</p></div><div class="modal fade" id="susbc-form"> <div class="modal-dialog shadow-lg p-3 mb-5 bg-white rounded"> <div class="modal-content sub-bg"> <div class="modal-header subs-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <!-- <h4 class="modal-title">Subscribe</h4> --> </div> <div class="modal-body text-left py-2"> <form  id="subs-form"> <div class="form-group"> <img src="https://www.stickpng.com/assets/images/584856bce0bb315b0f7675ad.png" alt="" width="80px"> <label for="exampleInputEmail1" class="h2 mb-5">Subscribe</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div></div><div class="modal fade" id="susbc-form-thank"> <div class="modal-dialog"> <div class="modal-content sub-bg shadow-lg"> <div class="modal-header subs-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <!-- <h4 class="modal-title">Modal title</h4> --> </div> <div class="modal-body"> <div class="heading-text text-center">
<h4 class="mb-5">Thank you For Subscribe</h4> <img style="margin-top: -45px" src="https://pa1.narvii.com/5817/8cfae2a0c3164aef2c9ac40e6775c305417c19aa_00.gif" alt="" width="150px">
</div> </div> </div> </div></div>

CSS

label{color:#000;font-weight:500;background:#fff;margin-bottom:5px;padding:4px;border-radius:4px}
input{margin-bottom:10px}
.subs-header{padding-top:0;border-bottom:0}
.heading-text{margin-top:10px}
.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{outline:0}

JS

setTimeout(function() {
   $('#susbc-form').modal('show');
},3000);
var form = document.getElementById("subs-form");
form.addEventListener("submit", onSubmitForm);
function onSubmitForm(e) {
   e.preventDefault();
   $('#subs-form')[0].reset();
   $('#susbc-form').modal('hide');
   $('#susbc-form-thank').modal('show');
}
¿Te gusto el post?
¡Compártelo!