For a specific effect, you will need the following piece of code found in the downloaded source code of the article ( http://tympanus.net/Development/ModalWindowEffects/ModalWindowEffects.zip )
http://jsfiddle.net/uqR3s/
HTML
<div class="md-modal md-effect-18" id="modal-18"> <div class="md-content"> <h3>Modal Dialog</h3> <div> <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button below to close the modal.</li> </ul> <button class="md-close">Close me!</button> </div> </div> </div> <button class="md-trigger md-setperspective" data-modal="modal-18">Make way!</button> <div class="md-overlay"></div> <!-- the overlay element -->
CSS
/* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300, 400, 700); @font-face { font-family:'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); font-weight: normal; font-style: normal; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, html { font-size: 100%; padding: 0; margin: 0; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content:" "; display: table; } .clearfix:after { clear: both; } body { font-family:'Lato', Calibri, Arial, sans-serif; color: #fff; background: #e74c3c; } a { color: #c0392b; text-decoration: none; } a:hover, a:active { color: #333; } /* Header Style */ .main, .container > header { margin: 0 auto; padding: 2em; } .container > header { text-align: center; background: #d94839; padding: 3em; } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; opacity: 0.7; padding: 0 0 0.6em 0.1em; } /* Main Content */ .main { max-width: 69em; } .column { float: left; width: 50%; padding: 0 2em; min-height: 300px; position: relative; } .column:nth-child(2) { box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1); } .column p { font-weight: 300; font-size: 2em; padding: 0; margin: 0; text-align: right; line-height: 1.5; } /* To Navigation Style */ .codrops-top { background: #fff; background: rgba(255, 255, 255, 0.2); text-transform: uppercase; width: 100%; font-size: 0.69em; line-height: 2.2; } .codrops-top a { padding: 0 1em; letter-spacing: 0.1em; display: inline-block; } .codrops-top a:hover { color: #e74c3c; background: rgba(255, 255, 255, 0.6); } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } .codrops-icon:before { font-family:'codropsicons'; margin: 0 4px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content:"\e001"; } .codrops-icon-prev:before { content:"\e004"; } button { border: none; padding: 0.6em 1.2em; background: #c0392b; color: #fff; font-family:'Lato', Calibri, Arial, sans-serif; font-size: 1em; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; display: inline-block; margin: 3px 2px; border-radius: 2px; } button:hover { background: #A5281B; } @media screen and (max-width: 46.0625em) { .column { width: 100%; min-width: auto; min-height: auto; padding: 1em; } .column p { text-align: left; font-size: 1.5em; } .column:nth-child(2) { box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); } } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } } /* General styles for the modal */ /* Styles for the html/body for special modal where we want 3d effects Note that we need a container wrapping all content on the page for the perspective effects (not including the modals and the overlay). */ .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { background: #222; -webkit-perspective: 600px; -moz-perspective: 600px; perspective: 600px; } .container { background: #e74c3c; min-height: 100%; } .md-modal { position: fixed; top: 50%; left: 50%; width: 50%; max-width: 630px; min-width: 320px; height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .md-show { visibility: visible; } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(143, 27, 15, 0.8); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show ~ .md-overlay { opacity: 1; visibility: visible; } /* Content styles */ .md-content { color: #fff; background: #e74c3c; position: relative; border-radius: 3px; margin: 0 auto; } .md-content h3 { margin: 0; padding: 0.4em; text-align: center; font-size: 2.4em; font-weight: 300; opacity: 0.8; background: rgba(0, 0, 0, 0.1); border-radius: 3px 3px 0 0; } .md-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 1.15em; } .md-content > div p { margin: 0; padding: 10px 0; } .md-content > div ul { margin: 0; padding: 0 0 30px 20px; } .md-content > div ul li { padding: 5px 0; } .md-content button { display: block; margin: 0 auto; font-size: 0.8em; } .md-effect-18 .md-content { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); opacity: 0; } .md-show.md-effect-18 .md-content { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: all 0.5s 0.1s; -moz-transition: all 0.5s 0.1s; transition: all 0.5s 0.1s; }
Js
/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true */ /*global define: false */ (function (window) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg(className) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ('classList' in document.documentElement) { hasClass = function (elem, c) { return elem.classList.contains(c); }; addClass = function (elem, c) { elem.classList.add(c); }; removeClass = function (elem, c) { elem.classList.remove(c); }; } else { hasClass = function (elem, c) { return classReg(c).test(elem.className); }; addClass = function (elem, c) { if (!hasClass(elem, c)) { elem.className = elem.className + ' ' + c; } }; removeClass = function (elem, c) { elem.className = elem.className.replace(classReg(c), ' '); }; } function toggleClass(elem, c) { var fn = hasClass(elem, c) ? removeClass : addClass; fn(elem, c); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if (typeof define === 'function' && define.amd) { // AMD define(classie); } else { // browser global window.classie = classie; } })(window); /** * modalEffects.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */ var ModalEffects = (function () { function init() { var overlay = document.querySelector('.md-overlay'); [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function (el, i) { var modal = document.querySelector('#' + el.getAttribute('data-modal')), close = modal.querySelector('.md-close'); function removeModal(hasPerspective) { classie.remove(modal, 'md-show'); if (hasPerspective) { classie.remove(document.documentElement, 'md-perspective'); } } function removeModalHandler() { removeModal(classie.has(el, 'md-setperspective')); } el.addEventListener('click', function (ev) { classie.add(modal, 'md-show'); overlay.removeEventListener('click', removeModalHandler); overlay.addEventListener('click', removeModalHandler); if (classie.has(el, 'md-setperspective')) { setTimeout(function () { classie.add(document.documentElement, 'md-perspective'); }, 25); } }); close.addEventListener('click', function (ev) { ev.stopPropagation(); removeModalHandler(); }); }); } init(); })();