"modal animate"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="intro"> <h1>Motion Blur Experiment</h1> <h2>by <a href="https://codepen.io/lbebber">Lucas Bebber</a></h2> <p>Click on the button below</p> </div> <button class="open-modal">Open Modal</button> <div class="modal-overlay"></div> <div class="modal"> <button class="close-modal">×</button> <div class="icon"> <i class="fa fa-user-plus"></i> </div> <h1>Some Title</h1> <input class="input-text" type="text" placeholder="some field"/> <input class="input-text" type="text" placeholder="some other field"/> <input class="input-submit" type="submit" value="Some Button"/> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters"> <defs> <filter id="blur"> <feGaussianBlur id="blur-filter" in="SourceGraphic" stdDeviation="0,0" /> </filter> </defs> </svg> <script> $(document).ready(function(){ var $obj=$(".modal") ,$overlay=$(".modal-overlay") ,blur=$("#blur-filter").get(0) ; function setBlur(v){ blur.setAttribute("stdDeviation", v); } function getPos(){ return $obj.position(); } var lastPos=getPos(); function update(){ var pos=getPos(); var limit=20; var dx=Math.min(limit,Math.abs(pos.left-lastPos.left)*0.5); var dy=Math.min(limit,Math.abs(pos.top-lastPos.top)*0.5); setBlur(dx+","+dy); lastPos=pos; requestAnimationFrame(update); } update(); var isOpen=false; function openModal(){ /*$overlay.css({ display:"block" })*/ TweenMax.to($overlay,0.1,{autoAlpha:1}); TweenMax.fromTo($obj,0.6,{y:-($(window).height()+$obj.height())},{delay:0.2,y:"0%",ease:Elastic.easeOut,easeParams:[1.1,0.7],force3D:true}); } function closeModal(){ TweenMax.to($overlay,0.1,{delay:0.55,autoAlpha:0}); TweenMax.to($obj,0.55,{y:$(window).height()+$obj.height(),ease:Back.easeIn,force3D:true}); } $(".open-modal").click(function(){ openModal(); }) $(".close-modal,.modal-overlay,.input-submit").click(function(){ closeModal(); }) }) </script>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300"); .input-submit, .open-modal { background: #c41; border: none; color: #eeeaea; font-family: "Roboto", sans-serif; font-weight: 700; outline: none; } * { box-sizing: border-box; } a { color: inherit; } body { background: #eeeaea; color: #334; font-family: roboto; overflow: hidden; } body::before { content: ""; display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(10,0,0,0.1); } h1, h2, h3 { font-weight: 300; margin: 0; } .icon { font-size: 60px; color: #c41; } .modal-overlay { background: rgba(51,51,68,0.4); position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; } .modal { background: #eeeaea; text-align: center; width: 230px; height: 320px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 3px; margin: auto; padding: 20px; -webkit-filter: url("#blur"); filter: url("#blur"); -webkit-transform: translate3d(0, -900%, 0); transform: translate3d(0, -900%, 0); } .modal h1 { margin-bottom: 20px; } input { margin-bottom: 10px; padding: 10px; font-family: roboto; border: none; width: 100%; } .input-text { background: #eeeaea; border-bottom: 2px solid #cdcccc; outline: none; color: #334; } :focus { border-bottom-color: #c41; } ::-webkit-input-placeholder { color: #334; } ::-moz-placeholder { color: #334; } :-ms-input-placeholder { color: #334; } ::placeholder { color: #334; } .input-submit { margin-top: 10px; } .close-modal { background: none; border: none; position: absolute; font-size: 20px; right: 10px; top: 10px; color: #334; outline: none; } .open-modal { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 200px; height: 40px; margin: auto; } .intro { text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 120px; -webkit-transform: translate(0, -90px); transform: translate(0, -90px); } .filters { position: absolute; width: 0; height: 0; }

Related: See More


Questions / Comments: