forked from voronianski/jquery.avgrund.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (68 loc) · 3.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Dmitri Voronianski">
<title>jQuery plugin for Avgrund concept popin</title>
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://labs.voronianski.com/media/style/reset.css">
<link rel="stylesheet" href="./style/style.css">
<link rel="stylesheet" href="./style/avgrund.css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Avgrund Modal.</h1>
<p>Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). File size is under 2Kb, MIT Licensed.</p>
<div class="buttons">
<a href="#" id="show" class="button left">Show it</a>
<a href="http://labs.voronianski.com/jquery.avgrund.js_v1_0.zip" class="button download left">Download source</a>
</div>
<p class="clear">You can simply init Avgrund with one line:</p>
<pre>$('element').avgrund();</pre>
<p>Avgrund has several options for you to customize it easily:</p>
<pre>$('element').avgrund({
width: 380, // max is 640px
height: 280, // max is 350px
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
holderClass: '', // lets you name custom class for popin holder..
overlayClass: '', // ..and overlay block
enableStackAnimation: false, // another animation type
onBlurContainer: '', // enables blur filter for specified block
template: 'Your content goes here..'
});</pre>
<p>Avgrund plugin was inspired by Hakimel's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p>
<div class="socials">
<div class="right">
<span>©2012</span>
<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> /
<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a>
</div>
</div>
</div>
<a href="https://github.com/voronianski/jquery.avgrund.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="./js/jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
height: 200,
holderClass: 'custom',
showClose: true,
showCloseText: 'Close',
enableStackAnimation: true,
onBlurContainer: '.container',
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>' +
'<div>' +
'<a href="http://github.com/voronianski/jquery.avgrund.js" target="_blank" class="github">Avgrund on Github</a>' +
'<a href="http://twitter.com/voronianski" target="_blank" class="twitter">Twitter</a>' +
'<a href="http://dribbble.com/voronianski" target="_blank" class="dribble">Dribbble</a>' +
'</div>'
});
});
</script>
</body>
</html>