<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>

.modal { /* display: block;*/ padding-right: 0px; background-color: rgba(4, 4, 4, 0.8); } .modal-dialog { top: 20%; width: 100%; position: absolute; } .modal-content { border-radius: 0px; border: none; top: 40%; } .modal-body { background-color: #E22E2E; color: white; }

// 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); });