Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
76 lines (58 sloc) 3.04 KB
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Avgrund - A modal UI concept</title>
<meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
<meta name="author" content="Hakim El Hattab">
<meta name="viewport" content="width=800, user-scalable=no">
<link href=',700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/avgrund.css">
function openDialog() { "#default-popup" );
function closeDialog() {
<aside id="default-popup" class="avgrund-popup">
<h2>That's all, folks</h2>
You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
If you like this you would probably enjoy <a href="">Meny</a>, <a href="">reveal.js</a> and <a href="">stroll.js</a>.
<button onclick="javascript:closeDialog();">Close</button>
<article class="avgrund-contents">
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.
<button onclick="javascript:openDialog();">Open Avgrund</button>
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.
<em>Avgrund</em> is Swedish for abyss.
Created by <a href="">@hakimel</a> / <a href=""></a>
<div class="sharing">
<a href="" class="twitter-share-button" data-text="Avgrund - a depth-based modal concept from @hakimel" data-url="" data-count="small" data-related="hakimel"></a>
<iframe id="facebook-button" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
<div class="avgrund-cover"></div>
<script type="text/javascript" src="js/avgrund.js"></script>
<a class="fork-reveal" href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub"></a>
<script type="text/javascript" src=""></script>