"modal"
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 ----------> <!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/balapa/pen/obpLeJ?depth=everything&limit=all&order=popularity&page=9&q=modal&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">html, body { display: table; width: 100%; height: 100%; background: #005C97; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #005C97, #363795); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #005C97, #363795); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .main-ctr { display: table-cell; vertical-align: middle; text-align: center; } #element { fill: white; } #step-0, #step-1, #step-2, #step-3 { opacity: 0; } #modal-with-genie-effect #close { cursor: pointer; position: relative; transition: .3s all ease; opacity: 1; } #modal-with-genie-effect #word { transition: .3s all ease; opacity: 1; position: relative; } #modal-with-genie-effect.active #close { opacity: 0; pointer-events: none; transition: .3s all ease .15s; } #modal-with-genie-effect.active #word { opacity: 0; transition: .3s all ease .3s; } #open-modal-ctr { opacity: 0; pointer-events: none; cursor: pointer; transition: .3s all ease; } #open-modal-ctr.active { opacity: 1; transition: .3s all ease .1s; pointer-events: auto; } </style></head><body> <div class="main-ctr"> <svg xmlns="http://www.w3.org/2000/svg" width="540" height="620" viewBox="0 0 540 620"> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="modal-with-genie-effect"> <path id="step-3" stroke="#979797" d="M186 561.005c0-2.764 2.234-5.005 4.998-5.005h157.004c2.76 0 4.998 2.242 4.998 5.005v33.99c0 2.764-2.234 5.005-4.998 5.005H190.998c-2.76 0-4.998-2.242-4.998-5.005v-33.99z" opacity=".504"/> <path id="step-2" stroke="#979797" d="M270.136 122h237.356c2.758 0 4.36 2.15 3.577 4.8 0 0-23.333 86.246-92.842 174.822-69.51 88.575-66.458 185.37-66.458 185.37-.033 2.776-2.25 5.008-5.01 5.008H193.51c-2.76 0-4.977-2.232-5.01-5.008 0 0 3.05-96.795-66.458-185.37C52.534 213.046 29.202 126.8 29.202 126.8c-.783-2.65.82-4.8 3.578-4.8h237.356z" opacity=".5"/> <path id="step-0" stroke="#979797" d="M20 26.003C20 23.24 22.23 21 25.01 21h489.98c2.767 0 5.01 2.242 5.01 5.003v289.994c0 2.763-2.23 5.003-5.01 5.003H25.01c-2.767 0-5.01-2.242-5.01-5.003V26.003z"/> <path id="element" fill="#FFF" d="M20 26.003C20 23.24 22.23 21 25.01 21h489.98c2.767 0 5.01 2.242 5.01 5.003v289.994c0 2.763-2.23 5.003-5.01 5.003H25.01c-2.767 0-5.01-2.242-5.01-5.003V26.003z"/> <g id="open-modal-ctr"> <path id="open-modal-btn" fill="#FFF" d="M186 561.005c0-2.764 2.234-5.005 4.998-5.005h157.004c2.76 0 4.998 2.242 4.998 5.005v33.99c0 2.764-2.234 5.005-4.998 5.005H190.998c-2.76 0-4.998-2.242-4.998-5.005v-33.99z"/> <text id="text" fill="#7E7878" font-family="Roboto" font-size="16" font-weight="260" transform="translate(185 556)"> <tspan x="41.797" y="27">Open Modal</tspan> </text> </g> <g id="word" font-family="Roboto"> <text id="title" fill="#434343" font-size="20" transform="translate(20 124)"> <tspan x="93.713" y="19">Modal Interaction with Genie Effect</tspan> </text> <text id="paragraf" fill="#7E7878" font-size="16" font-weight="260" transform="translate(20 124)"> <tspan x="100.457" y="59">Inspired by Mac OS X minimize interaction.</tspan> <tspan x="120.609" y="84">Built with SVG and Greensock Plugin.</tspan> </text> </g> <g id="close" transform="translate(486 36)"> <circle id="bg" cx="10" cy="10" r="10" fill="#E9413D"/> <path id="Shape" stroke="#FFF" d="M6 6.023l7.99 7.945M13.99 6.023L6 13.968" stroke-linecap="round"/> </g> </g> </g> </svg> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script><script src='https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js'></script> <script >var element = document.querySelector("#element"), wrapper = document.querySelector("#modal-with-genie-effect"), close = document.querySelector("#close"), word = document.querySelector("#word"), open = document.querySelector("#open-modal-ctr"), step0 = "#step-0", step2 = "#step-2", step3 = "#step-3"; var tl = new TimelineMax(); close.addEventListener("click", function(){ wrapper.classList.add("active"); tl .to(element, .3, { delay: .7, y: "-15px", scaleY: .9 }) .to(element, .3, { morphSVG: step2 }) .to(element, .3, { morphSVG: step3, }, "-=.15") .to(element, .3, { y: "0", scaleY: 1, onComplete: function(){ open.classList.add("active"); } }, "-=.15") }); open.addEventListener("click", function(){ this.classList.remove("active"); tl .to(element, .3, { delay: .45, y: "10px", }) .to(element, .3, { morphSVG: step2, }) .to(element, .3, { morphSVG: step0 }, "-=.15") .to(element, .3, { y: "0", onComplete: function(){ wrapper.classList.remove("active"); } }, "-=.3") }); // copy balapaCop("Modal Interaction with Genie Effect", "rgba(255,255,255,.5)"); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: