<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <h1>Modal Experiments</h1> <button class='tilt-btn'>Tilt Up</button> <button class='zoom-btn'>Zoom In</button> <div class='cover hidden'></div> <div class='modal hidden'> <div class='content'> <p>Hey There</p> </div> </div> <script> $("button.tilt-btn").on ("click", function() { $('.modal, .cover').removeClass("hidden"); $('.modal').addClass("tiltup"); }); $("button.zoom-btn").on ("click", function() { $('.modal, .cover').removeClass("hidden"); $('.modal').addClass("zoom"); }); //hide modal $(".cover, .close").on ("click", function() { $('.modal').attr('class', 'modal'); $('.modal, .cover').addClass("hidden"); }); </script>

body, h1 { font-family: sans-serif; text-align: center; overflow: hidden; background-color: #ddd; color: #333; } .cover { z-index: 1; position: fixed; height: 100%; width: 100%; background-color: #333; top: 0; left: 0; opacity: .9; } .modal { z-index: 2; height: 200px; width: 300px; background-color: #26C1DD; border-radius: 5px; text-align: center; border-top: solid 3px #157688; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .modal .content p { font-size: 2em; color: #fff; height: 50px; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .tiltup { display: block; transform: perspective(300px); animation: tiltup 0.7s; animation-fill-mode: forwards; padding-top: 0; } @keyframes tiltup { 0% { bottom: -400px; opacity: 0; transform: rotateX(-80deg); border-top: solid 40px; } 30% { opacity: 0; } 100% { bottom: 0; } } .zoom { display: block; animation: zoom 0.7s; animation-fill-mode: forwards; } @keyframes zoom { 0% { opacity: 0; transform: scale(0, 0); } 30% { opacity: 0; } 100% { bottom: 0; } } button { position: relative; display: block; margin: 10px auto; border: none; padding: 10px; } button:hover { background-color: #ddd; } .hidden { display: none; } .reverse { animation-direction: reverse; } button { border-radius: 4px; background-color: #888; color: #fff; cursor: pointer; border-top: solid 4px #777; } button:hover { background-color: #999; } button:focus { outline: none; border: none; }