Snap Builder HTML5 CSS3 Free Public Codes Library


<!doctype html>
<head>
<title>HTML5 CSS3 Modal Box With Animation</title>

<style>
/* Begin HTML5 CSS3 Modal Box With Animation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Paul Hayes : http://www.paulrhayes.com/2011-03/css-modal/ : Creative Commons License == */
a {color:#333;text-decoration:none;}
a:visited {font-weight:normal;text-decoration:none;}
.strong a:visited, a.strong:visited {font-weight:bold;}
a:hover,a:focus,a:active {color:#000;text-decoration:underline;}
body {
font-size:1em;
line-height:1.5em;  /* 16px/24px default */
color:#666;
background:#e6e6e6;
font-family:"verdana,Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight:200;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
/* Container */
.modal {
/* Overlay page content */
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.5);
z-index:10000;
/* Transition opacity on open */
-webkit-transition:opacity 500ms ease-in;
-moz-transition:opacity 500ms ease-in;
transition:opacity 500ms ease-in;
/* Hide for now */
opacity:0;
pointer-events:none;
}
/* Show modal */
.modal:target {
opacity:1;
pointer-events:auto;
}
/* Content */
.modal > div {
width:500px;
background:#fff;
position:relative;
margin:10% auto;
/* Default minimise animation */
-webkit-animation:minimise 500ms linear;
/* Prettify */
padding:30px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow:0 3px 20px rgba(0,0,0,0.9);
box-shadow:0 3px 20px rgba(0,0,0,0.9);
background:-moz-linear-gradient(#fff, #ccc);
background:-webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(255,255,255)), color-stop(0.57, rgb(230,230,230)));
text-shadow:0 1px 0 #fff;
}
/* Override animation on modal open */
.modal:target > div {
-webkit-animation-name:bounce;
}
.modal h2 {
font-size:36px;
padding:0 0 20px;
}
@-webkit-keyframes bounce {0% {-webkit-transform:scale3d(0.1,0.1,1);-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);}
55% {-webkit-transform:scale3d(1.08,1.08,1);-webkit-box-shadow:0 10px 20px rgba(0,0,0,0);}
75% {-webkit-transform:scale3d(0.95,0.95,1);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.9);}
100% {-webkit-transform:scale3d(1,1,1);-webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);}
}
@-webkit-keyframes minimise {0% {-webkit-transform:scale3d(1,1,1);}
100% {-webkit-transform:scale3d(0.1,0.1,1);}
}
/* Modal close link */
.modal a[href="#close"] {
position:absolute;
right:0;
top:0;
color:transparent;
}
/* Reset native styles */
.modal a[href="#close"]:focus {
outline:none;
}
/* Create close button */
.modal a[href="#close"]:after {
content:'X';
display:block;
/* Position */
position:absolute;
right:-10px;
top:-10px;
width:1.5em;
padding:1px 1px 1px 2px;
/* Style */
text-decoration:none;
text-shadow:none;
text-align:center;
font-weight:bold;
background:#000;
color:#fff;
border:3px solid #fff;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
}
.modal a[href="#close"]:focus:after {
outline:1px solid #000;
}
/* Open modal */
a.openModal {
margin:1em auto;
display:block;
width:200px;
background:#ccc;
text-align:center;
padding:10px;
-moz-border-radius:7px;
border-radius:7px;
background:-moz-linear-gradient(#fff, #ddd);
background:-webkit-gradient(linear, right top, right bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));
text-shadow:0 1px 0 #fff;
border:1px solid rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 1px 1px rgba(0,0,0,0.3);
}
a.openModal:hover,
a.openModal:focus {
background:-moz-linear-gradient(#fff, #ccc);
background:-webkit-gradient(linear, right top, right bottom, from(rgb(255,255,255)), to(rgb(200,200,200)));
}
</style>

</head>
<body>

<p align="center">Click on any button below to open the modal window demonstration.</p>

<a href="#example" class="openModal">Open modal</a>
<a href="#example2" class="openModal">Open a different modal</a>

<aside id="example" class="modal">
<div>
<h2>Modal box</h2>
<p>The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise animation as it <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=435442">doesn't yet support @keyframe</a>.</p>
<a href="#close" title="Close">Close</a>
</div>
</aside>

<aside id="example2" class="modal">
<div>
<h2>Another modal box</h2>
<p>This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose.</p>
<a href="#close" title="Close">Close</a>
</div>
</aside>

<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_151.html">Modal Box With Animation</a> page. ]
</div>

</body>
</html>