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.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,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,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',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.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,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.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();

})();