"Onload popup after few seconds"
Bootstrap 3.3.0 Snippet by Mahabeer

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="enquirypopup" class="modal fade in" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content row"> <div class="modal-header custom-modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Enquire Now</h4> </div> <div class="modal-body"> <form name="info_form" class="form-inline" action="#" method="post"> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name"> </div> <div class="form-group col-sm-12"> <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email"> </div> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="checkin" id="cheeckin" placeholder="Check-In Date"> </div> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="checkout" id="cheeckout" placeholder="Check-Out Date"> </div> <div class="form-group col-sm-12"> <input type="text" class="form-control" name="phone" id="phone" placeholder="Enter Phone"> </div> <div class="form-group col-sm-12"> <textarea class="form-control" id="msg" name="msg" rows="4" placeholder="Enter Message"></textarea> </div> <div class="form-group col-sm-12"> <button type="submit" class="btn btn-default pull-right">Submit</button> </div> </form> </div> </div> </div> </div>
#enquirypopup .modal-dialog { width: 400px; padding: 0px ; position: relative; } #enquirypopup .modal-dialog { width: 400px; padding: 0px ; position: relative; } #enquirypopup .modal-dialog:before { content: ''; height: 0px; width: 0px; border-left: 50px solid #17B6BB; border-right: 50px solid transparent; border-bottom: 50px solid transparent; position: absolute; top: 1px; left: -14px; z-index: 99; } .custom-modal-header { text-align: center; color: #17b6bb; text-transform: uppercase; letter-spacing: 2px; border-top: 4px solid; } #enquirypopup .modal-dialog .close { z-index: 99999999; color: white; text-shadow: 0px 0px 0px; font-weight: normal; top: 4px; right: 6px; position: absolute; opacity: 1; } .custom-modal-header .modal-title { /* font-weight: bold; */ font-size: 18px; } #enquirypopup .modal-dialog:after { content: ''; height: 0px; width: 0px; /* border-right: 50px solid rgba(255, 0, 0, 0.98); */ border-right: 50px solid #17b6bb; border-bottom: 50px solid transparent; position: absolute; top: 1px; right: -14px; z-index: 999999; } .form-group { margin-bottom: 15px !important; } .form-inline .form-control { display: inline-block; width: 100%; vertical-align: middle; }
$(window).load(function(){ setTimeout(function() { $('#enquirypopup').modal('show'); }, 3000); });

Related: See More


Questions / Comments:

Give code is very easy to understand

But there is some error in this code that why code is not running properly

please give correct code which runs properly

rjagtap () - 4 years ago - Reply 0


How can I get the response with this form. Can you please share the PHP file for this form

vipinsaxena () - 4 years ago - Reply 0