Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Allowing multiple dialogs in one page

  • Loading branch information...
commit 5417d542b314d1b3cebaaeef67b0387247f24cb2 1 parent 2a9d1cf
@krasimir krasimir authored
View
107 css/avgrund.css
@@ -5,105 +5,14 @@
*
* Created by Hakim El Hattab, http://hakim.se
*/
-
-* {
- margin: 0;
- padding: 0;
-}
-
-html,
-body {
- height: 100%;
- overflow: hidden;
-}
-
-html {
- background-color: #222;
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
- background-repeat: repeat;
-}
-
-h1,
-h2 {
- font-size: 24px;
-}
-
-p {
- margin: 10px 0 10px 0;
- font-size: 16px;
- line-height: 1.32;
-}
-
-a {
- color: #7aa76d;
- text-decoration: none;
-
- -webkit-transition: 0.15s color ease;
- -moz-transition: 0.15s color ease;
- -ms-transition: 0.15s color ease;
- -o-transition: 0.15s color ease;
- transition: 0.15s color ease;
-}
- a:hover {
- color: #91cd85;
- }
-
-small {
- display: block;
- margin-top: 15px;
- padding-top: 15px;
- color: #333;
- font-size: 0.85em;
- border-top: 1px dashed #ccc;
-
- -webkit-text-size-adjust: none;
-}
-
-button {
- border: 0px;
- padding: 8px 10px;
- margin: 5px 0px;
- border-radius: 1px;
-
- cursor: pointer;
- color: #fff;
- background: #7aa76d;
- font-size: 15px;
-
- -webkit-transition: 0.15s background ease;
- -moz-transition: 0.15s background ease;
- -ms-transition: 0.15s background ease;
- -o-transition: 0.15s background ease;
- transition: 0.15s background ease;
+
+.avgrund-active body {
+ -webkit-transform: scale( 0.9 );
+ -moz-transform: scale( 0.9 );
+ -ms-transform: scale( 0.9 );
+ -o-transform: scale( 0.9 );
+ transform: scale( 0.9 );
}
- button:hover {
- background: #91cd85;
- }
- button:active {
- background: #60895a;
- }
- button+button {
- margin-left: 5px;
- }
-
-.sharing {
- margin-top: 50px;
-}
-
-body {
- background: #fff;
-
- font-family: 'Lato', Helvetica, sans-serif;
- font-size: 16px;
- color: #222;
-}
- .avgrund-active body {
- -webkit-transform: scale( 0.9 );
- -moz-transform: scale( 0.9 );
- -ms-transform: scale( 0.9 );
- -o-transform: scale( 0.9 );
- transform: scale( 0.9 );
- }
.avgrund-cover {
position: absolute;
@@ -165,7 +74,7 @@ body {
-o-transform: scale( 0.8 );
transform: scale( 0.8 );
}
- .avgrund-active .avgrund-popup {
+ .avgrund-active .avgrund-popup-animate {
visibility: visible;
opacity: 1;
View
0  css/css
No changes.
View
99 css/styles.css
@@ -0,0 +1,99 @@
+/*!
+ * avgrund 0.1
+ * http://lab.hakim.se/avgrund
+ * MIT licensed
+ *
+ * Created by Hakim El Hattab, http://hakim.se
+ */
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+html {
+ background-color: #222;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
+ background-repeat: repeat;
+}
+
+h1,
+h2 {
+ font-size: 24px;
+}
+
+p {
+ margin: 10px 0 10px 0;
+ font-size: 16px;
+ line-height: 1.32;
+}
+
+a {
+ color: #7aa76d;
+ text-decoration: none;
+
+ -webkit-transition: 0.15s color ease;
+ -moz-transition: 0.15s color ease;
+ -ms-transition: 0.15s color ease;
+ -o-transition: 0.15s color ease;
+ transition: 0.15s color ease;
+}
+ a:hover {
+ color: #91cd85;
+ }
+
+small {
+ display: block;
+ margin-top: 15px;
+ padding-top: 15px;
+ color: #333;
+ font-size: 0.85em;
+ border-top: 1px dashed #ccc;
+
+ -webkit-text-size-adjust: none;
+}
+
+button {
+ border: 0px;
+ padding: 8px 10px;
+ margin: 5px 0px;
+ border-radius: 1px;
+
+ cursor: pointer;
+ color: #fff;
+ background: #7aa76d;
+ font-size: 15px;
+
+ -webkit-transition: 0.15s background ease;
+ -moz-transition: 0.15s background ease;
+ -ms-transition: 0.15s background ease;
+ -o-transition: 0.15s background ease;
+ transition: 0.15s background ease;
+}
+ button:hover {
+ background: #91cd85;
+ }
+ button:active {
+ background: #60895a;
+ }
+ button+button {
+ margin-left: 5px;
+ }
+
+.sharing {
+ margin-top: 50px;
+}
+
+body {
+ background: #fff;
+
+ font-family: 'Lato', Helvetica, sans-serif;
+ font-size: 16px;
+ color: #222;
+}
View
51 index.html
@@ -13,18 +13,52 @@
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="css/avgrund.css?2">
+ <link rel="stylesheet" href="css/styles.css">
+ <link rel="stylesheet" href="css/avgrund.css">
+
+ <script>
+ function showDialog() {
+ Avgrund.show("#custom-popup");
+ }
+ function stackIt() {
+ Avgrund.show("#default-popup");
+ }
+ function growIt() {
+ Avgrund.show("#default-popup");
+ }
+ function closeDialog() {
+ Avgrund.hide();
+ }
+ </script>
+
</head>
<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>
+
+ <div id="custom-popup" class="avgrund-popup">
+ <p>Custom popup content</p>
+ <a href="#" id="custom-popup-close">close</a>
+ </div>
+
<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 a button below to give it a try.
</p>
- <button onclick="avgrund.activate( 'stack' );">Stack it</button>
- <button onclick="avgrund.activate();">Grow it</button>
+ <button onclick="javascript:stackIt();">Stack it</button>
+ <button onclick="javascript:growIt();">Grow it</button>
+ <button onclick="javascript:showDialog();">Other dialog</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.
@@ -45,17 +79,6 @@
<div class="avgrund-cover"></div>
- <aside 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="avgrund.deactivate();">Close</button>
- </aside>
-
<script type="text/javascript" src="js/avgrund.js"></script>
<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>
View
21 js/avgrund.js
@@ -5,10 +5,10 @@
*
* Copyright (C) 2012 Hakim El Hattab, http://hakim.se
*/
-(function(){
+var Avgrund = (function(){
var container = document.documentElement,
- popup = document.querySelector( '.avgrund-popup' ),
+ popup = document.querySelector( '.avgrund-popup-animate' ),
cover = document.querySelector( '.avgrund-cover' ),
currentState = null;
@@ -49,6 +49,7 @@
document.removeEventListener( 'click', onDocumentClick, false );
removeClass( container, 'avgrund-active' );
+ removeClass( popup, 'avgrund-popup-animate')
}
function disableBlur() {
@@ -63,10 +64,22 @@
element.className = element.className.replace( name, '' );
}
- window.avgrund = {
+ function show(selector){
+ popup = document.querySelector( selector );
+ addClass(popup, 'avgrund-popup-animate');
+ activate();
+ return this;
+ }
+ function hide() {
+ deactivate();
+ }
+
+ return {
activate: activate,
deactivate: deactivate,
- disableBlur: disableBlur
+ disableBlur: disableBlur,
+ show: show,
+ hide: hide
}
})();

2 comments on commit 5417d54

@Philipp-Komers

Hi, you have done a nice work with this, but there is one thing that I can't understand: 'Allowing multiple dialogs in one page'. How can it be done? It can be that I Can't see the wood for the trees, can you help me out?

Please sign in to comment.
Something went wrong with that request. Please try again.