Tuesday, December 27, 2016

[Bootstrap] Example code showing modal when page load and hide after 5 seconds



html part :
<div class="modal fade" id="savedModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" id="memberModalLabel">Operation success.</h4>
            </div>
            <div class="modal-body">
            <p>Content Saved.</p>
            </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>           
        </div>
    </div>
</div>
JavaScript part:
<script>
$(document).ready(function () {
    $('#savedModal').modal('show');
    setTimeout(function(){
    $('#savedModal').modal('hide');
    }, 5000);
});
</script>
Reference:
http://stackoverflow.com/questions/28068119/bootstrap-modal-opening-on-page-load
http://stackoverflow.com/questions/18730284/bootstrap-modal-close-after-4-seconds-or-user-click

No comments :

Post a Comment