Skip to content

Commit 5417d54

Browse files
author
Krasimir Tsonev
committedSep 6, 2012
Allowing multiple dialogs in one page
·
0.1.0
1 parent 2a9d1cf commit 5417d54

File tree

5 files changed

+161
-117
lines changed

5 files changed

+161
-117
lines changed
 

‎css/avgrund.css

+8-99
Original file line numberDiff line numberDiff line change
@@ -5,105 +5,14 @@
55
*
66
* Created by Hakim El Hattab, http://hakim.se
77
*/
8-
9-
* {
10-
margin: 0;
11-
padding: 0;
12-
}
13-
14-
html,
15-
body {
16-
height: 100%;
17-
overflow: hidden;
18-
}
19-
20-
html {
21-
background-color: #222;
22-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
23-
background-repeat: repeat;
24-
}
25-
26-
h1,
27-
h2 {
28-
font-size: 24px;
29-
}
30-
31-
p {
32-
margin: 10px 0 10px 0;
33-
font-size: 16px;
34-
line-height: 1.32;
35-
}
36-
37-
a {
38-
color: #7aa76d;
39-
text-decoration: none;
40-
41-
-webkit-transition: 0.15s color ease;
42-
-moz-transition: 0.15s color ease;
43-
-ms-transition: 0.15s color ease;
44-
-o-transition: 0.15s color ease;
45-
transition: 0.15s color ease;
46-
}
47-
a:hover {
48-
color: #91cd85;
49-
}
50-
51-
small {
52-
display: block;
53-
margin-top: 15px;
54-
padding-top: 15px;
55-
color: #333;
56-
font-size: 0.85em;
57-
border-top: 1px dashed #ccc;
58-
59-
-webkit-text-size-adjust: none;
60-
}
61-
62-
button {
63-
border: 0px;
64-
padding: 8px 10px;
65-
margin: 5px 0px;
66-
border-radius: 1px;
67-
68-
cursor: pointer;
69-
color: #fff;
70-
background: #7aa76d;
71-
font-size: 15px;
72-
73-
-webkit-transition: 0.15s background ease;
74-
-moz-transition: 0.15s background ease;
75-
-ms-transition: 0.15s background ease;
76-
-o-transition: 0.15s background ease;
77-
transition: 0.15s background ease;
8+
9+
.avgrund-active body {
10+
-webkit-transform: scale( 0.9 );
11+
-moz-transform: scale( 0.9 );
12+
-ms-transform: scale( 0.9 );
13+
-o-transform: scale( 0.9 );
14+
transform: scale( 0.9 );
7815
}
79-
button:hover {
80-
background: #91cd85;
81-
}
82-
button:active {
83-
background: #60895a;
84-
}
85-
button+button {
86-
margin-left: 5px;
87-
}
88-
89-
.sharing {
90-
margin-top: 50px;
91-
}
92-
93-
body {
94-
background: #fff;
95-
96-
font-family: 'Lato', Helvetica, sans-serif;
97-
font-size: 16px;
98-
color: #222;
99-
}
100-
.avgrund-active body {
101-
-webkit-transform: scale( 0.9 );
102-
-moz-transform: scale( 0.9 );
103-
-ms-transform: scale( 0.9 );
104-
-o-transform: scale( 0.9 );
105-
transform: scale( 0.9 );
106-
}
10716

10817
.avgrund-cover {
10918
position: absolute;
@@ -165,7 +74,7 @@ body {
16574
-o-transform: scale( 0.8 );
16675
transform: scale( 0.8 );
16776
}
168-
.avgrund-active .avgrund-popup {
77+
.avgrund-active .avgrund-popup-animate {
16978
visibility: visible;
17079
opacity: 1;
17180

‎css/css

Whitespace-only changes.

‎css/styles.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*!
2+
* avgrund 0.1
3+
* http://lab.hakim.se/avgrund
4+
* MIT licensed
5+
*
6+
* Created by Hakim El Hattab, http://hakim.se
7+
*/
8+
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
html,
15+
body {
16+
height: 100%;
17+
overflow: hidden;
18+
}
19+
20+
html {
21+
background-color: #222;
22+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
23+
background-repeat: repeat;
24+
}
25+
26+
h1,
27+
h2 {
28+
font-size: 24px;
29+
}
30+
31+
p {
32+
margin: 10px 0 10px 0;
33+
font-size: 16px;
34+
line-height: 1.32;
35+
}
36+
37+
a {
38+
color: #7aa76d;
39+
text-decoration: none;
40+
41+
-webkit-transition: 0.15s color ease;
42+
-moz-transition: 0.15s color ease;
43+
-ms-transition: 0.15s color ease;
44+
-o-transition: 0.15s color ease;
45+
transition: 0.15s color ease;
46+
}
47+
a:hover {
48+
color: #91cd85;
49+
}
50+
51+
small {
52+
display: block;
53+
margin-top: 15px;
54+
padding-top: 15px;
55+
color: #333;
56+
font-size: 0.85em;
57+
border-top: 1px dashed #ccc;
58+
59+
-webkit-text-size-adjust: none;
60+
}
61+
62+
button {
63+
border: 0px;
64+
padding: 8px 10px;
65+
margin: 5px 0px;
66+
border-radius: 1px;
67+
68+
cursor: pointer;
69+
color: #fff;
70+
background: #7aa76d;
71+
font-size: 15px;
72+
73+
-webkit-transition: 0.15s background ease;
74+
-moz-transition: 0.15s background ease;
75+
-ms-transition: 0.15s background ease;
76+
-o-transition: 0.15s background ease;
77+
transition: 0.15s background ease;
78+
}
79+
button:hover {
80+
background: #91cd85;
81+
}
82+
button:active {
83+
background: #60895a;
84+
}
85+
button+button {
86+
margin-left: 5px;
87+
}
88+
89+
.sharing {
90+
margin-top: 50px;
91+
}
92+
93+
body {
94+
background: #fff;
95+
96+
font-family: 'Lato', Helvetica, sans-serif;
97+
font-size: 16px;
98+
color: #222;
99+
}

‎index.html

+37-14
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,52 @@
1313

1414
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
1515

16-
<link rel="stylesheet" href="css/avgrund.css?2">
16+
<link rel="stylesheet" href="css/styles.css">
17+
<link rel="stylesheet" href="css/avgrund.css">
18+
19+
<script>
20+
function showDialog() {
21+
Avgrund.show("#custom-popup");
22+
}
23+
function stackIt() {
24+
Avgrund.show("#default-popup");
25+
}
26+
function growIt() {
27+
Avgrund.show("#default-popup");
28+
}
29+
function closeDialog() {
30+
Avgrund.hide();
31+
}
32+
</script>
33+
1734
</head>
1835

1936
<body>
2037

38+
<aside id="default-popup" class="avgrund-popup">
39+
<h2>That's all, folks</h2>
40+
<p>
41+
You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
42+
</p>
43+
<p>
44+
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>.
45+
</p>
46+
<button onclick="javascript:closeDialog();">Close</button>
47+
</aside>
48+
49+
<div id="custom-popup" class="avgrund-popup">
50+
<p>Custom popup content</p>
51+
<a href="#" id="custom-popup-close">close</a>
52+
</div>
53+
2154
<article class="avgrund-contents">
2255
<h1>Avgrund</h1>
2356
<p>
2457
A modal concept which aims to give a sense of depth between the page and modal layers. Click a button below to give it a try.
2558
</p>
26-
<button onclick="avgrund.activate( 'stack' );">Stack it</button>
27-
<button onclick="avgrund.activate();">Grow it</button>
59+
<button onclick="javascript:stackIt();">Stack it</button>
60+
<button onclick="javascript:growIt();">Grow it</button>
61+
<button onclick="javascript:showDialog();">Other dialog</button>
2862
<p>
2963
Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of
3064
it, not intended for any practical use.
@@ -45,17 +79,6 @@ <h1>Avgrund</h1>
4579

4680
<div class="avgrund-cover"></div>
4781

48-
<aside class="avgrund-popup">
49-
<h2>That's all, folks</h2>
50-
<p>
51-
You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
52-
</p>
53-
<p>
54-
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>.
55-
</p>
56-
<button onclick="avgrund.deactivate();">Close</button>
57-
</aside>
58-
5982
<script type="text/javascript" src="js/avgrund.js"></script>
6083

6184
<a class="fork-reveal" href="https://github.com/hakimel/avgrund"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>

‎js/avgrund.js

+17-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
*
66
* Copyright (C) 2012 Hakim El Hattab, http://hakim.se
77
*/
8-
(function(){
8+
var Avgrund = (function(){
99

1010
var container = document.documentElement,
11-
popup = document.querySelector( '.avgrund-popup' ),
11+
popup = document.querySelector( '.avgrund-popup-animate' ),
1212
cover = document.querySelector( '.avgrund-cover' ),
1313
currentState = null;
1414

@@ -49,6 +49,7 @@
4949
document.removeEventListener( 'click', onDocumentClick, false );
5050

5151
removeClass( container, 'avgrund-active' );
52+
removeClass( popup, 'avgrund-popup-animate')
5253
}
5354

5455
function disableBlur() {
@@ -63,10 +64,22 @@
6364
element.className = element.className.replace( name, '' );
6465
}
6566

66-
window.avgrund = {
67+
function show(selector){
68+
popup = document.querySelector( selector );
69+
addClass(popup, 'avgrund-popup-animate');
70+
activate();
71+
return this;
72+
}
73+
function hide() {
74+
deactivate();
75+
}
76+
77+
return {
6778
activate: activate,
6879
deactivate: deactivate,
69-
disableBlur: disableBlur
80+
disableBlur: disableBlur,
81+
show: show,
82+
hide: hide
7083
}
7184

7285
})();

0 commit comments

Comments
 (0)
Please sign in to comment.