Launch Bootstrap Modal on page load
Launch Bootstrap Modal on page load – Sometimes we need to open bootstrap modal on page load for some reasons. We can trigger the modal event on page load using the javascript. Here in this tutorial we are going to explain how you can launch bootstrap modal when page is loaded. We will explain this with demo.
Launch Bootstrap Modal on page load | Show After Page Load | Open After few Seconds | jQuery | Example
You can launch modal on page load simply as below –
Launch Bootstrap Modal on page load: JavaScript Example
<!----modal starts here--->
<div id="modal" class="modal fade" role='dialog'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Tutorialsplane Modal Demo</h4>
</div>
<div class="modal-body" id= "modal-body">
<p>Here the description starts here........</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
<script type="text/javascript">
$(window).load(function(){
$('#modal').modal('show');
});
</script>
|
The above method will be called on window load as soon as it is triggered modal is launched. If you run the above example it will show modal on page load-
Bootstrap modal on page load once | JavaScript
You can load modal only one time after page load using the jQuery cookie. Here is an example –
Launch Bootstrap Modal on page load: JavaScript Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function() {
if ($.cookie('checkModal') == null) {
$('#modal').modal('show');
$.cookie('checkModal', '1');
}
});
</script>
|
Open Modal Automatically after 2 Seconds
Sometimes we need to trigger modal automatically after 2 seconds, 3 seconds or few second of page load. You can do it easily using the jQuery simply as below-
Bootstrap Open Modal After few seconds of page Load Example:
<div class="container" style="padding:150px;">
<!----modal starts here--->
<div id="modal" class="modal fade" role='dialog' data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Tutorialsplane Modal Demo</h4>
</div>
<div class="modal-body">
<p>Here the description starts here........</p>
</div>
<div class="modal-footer">
<button type="button" data-backdrop="false" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal">Click Here To Open Modal</button>
</div>
<script type="text/javascript">
function showModal(){
$('#modal').modal('show');
}
// Show After 02 Seconds
setTimeout(function(){ showModal(); }, 2000);
// Show After 10 Seconds
//setTimeout(function(){ showModal(); }, 10000);
</script>
|
Advertisements
