Modal On Page Load Using Bootstrap

<!------------------Under Head Section------------------------>

<!-- Page Onload Script Starts -->
<script type="text/javascript">
  $(document).ready(function(){
    $("#onloadModal").modal('show');
  });
</script>
<!-- Page Onload Script Ends -->


<!------------------Under Body Section------------------------>
<!-- Page Onload CSS Modal Starts -->
<div id="onloadModal" class="modal fadeIn"  aria-hidden="false" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog w3-animate-bottom w3-card-16">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&emsp;&emsp;</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                <form method="POST">
                   <!-- <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>-->
                   <div class="form-group">
                        <input type="text" name="onLoadEmail" class="form-control" placeholder="Email Address" required>
                    </div>
                    <button type="submit" name="onLoadEmailSubmit" class="btn btn-primary w3-card-4">Subscribe</button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </form>
                                
            </div>
        </div>
    </div>
</div>


<!-- Page Onload Modal Ends -->
 
Previous
Next Post »