"modal"
Bootstrap 3.3.0 Snippet by evarevirus

<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 ----------> <button class="show" aria-haspopup="true">Show Modal</button> <div class="mask" role="dialog"></div> <div class="modal" role="alert"> <button class="close" role="button">X</button> </div> <script> // Click function for show the Modal $(".show").on("click", function(){ $(".mask").addClass("active"); }); // Function for close the Modal function closeModal(){ $(".mask").removeClass("active"); } // Call the closeModal function on the clicks/keyboard $(".close, .mask").on("click", function(){ closeModal(); }); $(document).keyup(function(e) { if (e.keyCode == 27) { closeModal(); } }); </script>
body { background: url(http://static.pexels.com/wp-content/uploads/2014/07/darkness-dawn-dusk-2073.jpg) no-repeat; background-size: 1920px 1000px; } .show { position: absolute; top: 50%; left: 50%; width: 150px; height: 40px; margin-top: -20px; margin-left: -75px; background: #e74c3c; color: #fff; border-radius: 5px; border: 0; border-bottom: 2px solid #c0392b; cursor: pointer; } .show:hover { background: #c0392b; } .show:active { transform: scale(0.9); } .close { position: absolute; top: 0; right: 0; width: 35px; height: 30px; background: #000; color: #fff; cursor: pointer; border: 0; } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 73, 94, 0.8); z-index: 50; visibility: hidden; opacity: 0; transition: 0.7s; } .modal { position: fixed; top: 50%; left: 50%; width: 400px; height: 300px; margin-left: -200px; margin-top: -150px; background: #bdc3c7; z-index: 100; visibility: hidden; opacity: 0; transition: 0.5s ease-out; transform: translateY(45px); } .active { visibility: visible; opacity: 1; } .active + .modal { visibility: visible; opacity: 1; transform: translateY(0); }

Related: See More


Questions / Comments: