Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Modal Boxes >> Modal Box With Animation

Code Snippet </> Info

Snippet Name: Modal Box With Animation

Description: Using CSS3 techniques a modal box can be created without using JavaScript or images.

Example: View Code Demo


Author: Paul Hayes

Last Modified: 2015-08-26 22:49:12

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying

<!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 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 : : 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="">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="">Modal Box With Animation</a> page. ] </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library