Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allowing multiple dialogs on one page #1

Merged
merged 1 commit into from

3 participants

@krasimir

Allowing multiple dialogs on one page

@hakimel hakimel merged commit 5417d54 into hakimel:master
@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 6, 2012
  1. @krasimir
This page is out of date. Refresh to see the latest.
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
}
})();
Something went wrong with that request. Please try again.