"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/dfitzy/pen/yeoeGO?depth=everything&limit=all&order=popularity&page=3&q=modal&show_forks=false" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Palanquin:700); html, body { background: #C7E5E6; font-family: 'Helvetica', Arial, sans-serif; height: 100%; margin: 0; padding: 0; width: 100%; } h1 { color: #A6A49C; font-family: 'Palanquin', Arial, sans-serif; } p { color: #474544; font-family: 'Helvetica', Arial, sans-serif; font-size: 14px; } .modal { opacity: 0; padding: 50px; position: absolute; z-index: 1100; -webkit-transition: opacity 600ms linear 600ms; -moz-transition: opacity 600ms linear 600ms; -ms-transition: opacity 600ms linear 600ms; -o-transition: opacity 600ms linear 600ms; transition: opacity 600ms linear 600ms; } .modal_info { background: #FCF9F2; padding: 50px 100px; text-align: center; } .modal_overlay { background: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; opacity: 0; overflow: auto; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 900; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; transition: opacity 200ms linear; } .display { opacity: 1; visibility: visible; } .conceal { visibility: visible; } .btn_container { height: 100%; text-align: center; } .btn_container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; width: 0; } .open_button { background: #363D4E; display: inline-block; height: 66px; position: relative; vertical-align: middle; whitespace: normal; width: 172px; z-index: 1000; -webkit-transition: opacity 100ms linear; -moz-transition: opacity 100ms linear; -ms-transition: opacity 100ms linear; -o-transition: opacity 100ms linear; transition: opacity 100ms linear; } a.open_button { color: #FFFFFF; letter-spacing: 2px; line-height: 66px; font-family: 'Helvetica', Arial, sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; text-transform: uppercase; } a.open_button:hover { background: #3E465A; } a.open_button.load { opacity: 0; } button.modal_close { background: #363D4E; border: none; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; color: #FFFFFF; cursor: pointer; outline: none; width: 52px; height: 52px; position: absolute; right: 30px; top: 30px; -webkit-transition: -webkit-transform 600ms; -moz-transition: -moz-transform 600ms; -ms-transition: -ms-transform 600ms; -o-transition: -o-transform 600ms; transition: transform 600ms; } button.modal_close:hover { background: #3E465A; -webkit-transform: rotate(360deg) scale(1.10); -moz-transform: rotate(360deg) scale(1.10); -ms-transform: rotate(360deg) scale(1.10); -o-transform: rotate(360deg) scale(1.10); transform: rotate(360deg) scale(1.10); -webkit-transition: -webkit-transform 600ms; -moz-transition: -moz-transform 600ms; -ms-transition: -ms-transform 600ms; -o-transition: -o-transform 600ms; transition: transform 600ms; } button.modal_close span, span:before, span:after { background: #FFFFFF; content: ''; cursor: pointer; display: block; height: 2px; position: absolute; width: 20px; } button.modal_close span:first-child { background: none; bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; } button.modal_close span:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } button.modal_close span:after { -webkit-transform: translateY(-2px) rotate(-45deg); -moz-transform: translateY(-2px) rotate(-45deg); -ms-transform: translateY(-2px) rotate(-45deg); -o-transform: translateY(-2px) rotate(-45deg); transform: translateY(-2px) rotate(-45deg); top: 2px; }</style></head><body> <div class="btn_container"> <a class="open_button" href="#">Fire Away</a> </div> <div class="modal_info"> <h1>Simple jQuery Modal</h1> <p>It may not look like much, but it still does exactly what it says straight out of the box.</p> </div> <div class="modal_overlay"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >(function(){ var $content = $('.modal_info').detach(); $('.open_button').on('click', function(e){ modal.open({ content: $content, width: 540, height: 270, }); $content.addClass('modal_content'); $('.modal, .modal_overlay').addClass('display'); $('.open_button').addClass('load'); }); }()); var modal = (function(){ var $close = $('<button role="button" class="modal_close" title="Close"><span></span></button>'); var $content = $('<div class="modal_content"/>'); var $modal = $('<div class="modal"/>'); var $window = $(window); $modal.append($content, $close); $close.on('click', function(e){ $('.modal, .modal_overlay').addClass('conceal'); $('.modal, .modal_overlay').removeClass('display'); $('.open_button').removeClass('load'); e.preventDefault(); modal.close(); }); return { center: function(){ var top = Math.max($window.height() - $modal.outerHeight(), 0) / 2; var left = Math.max($window.width() - $modal.outerWidth(), 0) / 2; $modal.css({ top: top + $window.scrollTop(), left: left + $window.scrollLeft(), }); }, open: function(settings){ $content.empty().append(settings.content); $modal.css({ width: settings.width || 'auto', height: settings.height || 'auto' }).appendTo('body'); modal.center(); $(window).on('resize', modal.center); }, close: function(){ $content.empty(); $modal.detach(); $(window).off('resize', modal.center); } }; }()); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: