<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 class="container">
<div class="row">
<center><h2>Windows 8 Bootstrap Modals With Timeout</h2></center>
<center><h3>Credits to <a href="http://bootsnipp.com/snippets/featured/windows-8-bootstrap-modals">AtiqUrRehman</a></h3></center>
<center><h5>I only added the on page load and timer :D</h5></center>
</div>
<div class="row">
<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<center><H2>Battery Low!</H2></center>
<center><h4>Your Laptop battery is less then 10%. Plug in your charger now.</h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
// Function to hide the Windows 8 Modal
function hide_modal(){
$('#myModal').modal('hide');
}
// On page laod, show the modal and set custom timer with the hide_modal function
$(window).load(function(){
//show modal on page laod
$('#myModal').modal('show');
//setTimeout for the modal to hide
window.setTimeout(hide_modal, 4400);
});
