<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>
