"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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lbebber/pen/zxpMZw?depth=everything&limit=all&order=popularity&page=2&q=modal&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@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; } </style></head><body> <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 src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js'></script> <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(); }) }) //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: