HIDE QUOTES

HTML

<title>Avgrund - A modal UI concept</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/avgrund.css">
<script>
    function openDialog() {
        Avgrund.show("#default-popup");
    }

    function openSecondDialog() {
        Avgrund.show("#second-popup");
    }

    function closeDialog() {
        Avgrund.hide();
    }
</script>
<body>
    <aside id="default-popup" class="avgrund-popup">
        	<h2>That's all, folks</h2>

        <p>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.</p>
        <p>If you like this you would probably enjoy <a href="http://lab.hakim.se/meny">Meny</a>, <a href="http://lab.hakim.se/reveal-js">reveal.js</a> and <a href="http://lab.hakim.se/scroll-effects">stroll.js</a>.</p>
        <button onclick="javascript:closeDialog();">Close</button>
    </aside>
    <aside id="second-popup" class="avgrund-popup">
        	<h2>That's a completely different popup</h2>

        <p>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.</p>
        <button onclick="javascript:closeDialog();">Close</button>
    </aside>
    <article class="avgrund-contents">
        	<h1>Avgrund</h1>

        <p>A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try.</p>
        <button onclick="javascript:openDialog();">Open Avgrund</button>
        <button onclick="javascript:openSecondDialog();">Open Second Avgrund</button>
        <p>Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of it, not intended for any practical use.</p>
        <p>	<em>Avgrund</em> is Swedish for abyss.</p>	<small>
				Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a...

CSS

html, body {
    height: 100%;
    overflow: auto;
}
.avgrund-popin {
    position: absolute;
    background: #fff;
    padding: 10px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    top: 50%;
    left: 50%;
    z-index: 1000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
.avgrund-overlay {
    background: #000;
    width: 100%;
    position: relative;
    top: -1500px;
    left: 0;
    z-index: 101;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
}
body.avgrund-ready, .avgrund-ready .avgrund-popin, .avgrund-ready .avgrund-overlay {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    -ms-transition: 0.3s all ease-out;
    -o-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;
}
body.avgrund-active {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    overflow: hidden;
}
.avgrund-active .avgrund-popin {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.avgrund-active .avgrund-overlay {
    visibility: visible;
    opacity: .5;
    filter: alpha(opacity=50);
    height: 20000px;
}
.avgrund-popin.stack {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}
.avgrund-active .avgrund-popin.stack {
    -webkit-transform: scale(1.1);
   ...