46 | 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. 47 |
48 | 49 |50 | Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 51 | it, not intended for any practical use. 52 |
53 |54 | Avgrund is Swedish for abyss. 55 |
56 | 57 | Created by Hakim El Hattab
73 |
74 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/js/avgrund.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * avgrund 0.1
3 | * http://lab.hakim.se/avgrund
4 | * MIT licensed
5 | *
6 | * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
7 | */
8 | var Avgrund = (function(){
9 |
10 | var container = document.documentElement,
11 | popup = document.querySelector( '.avgrund-popup-animate' ),
12 | cover = document.querySelector( '.avgrund-cover' ),
13 | currentState = null;
14 |
15 | container.classList.add( 'avgrund-ready' );
16 |
17 | // Deactivate on ESC
18 | function onDocumentKeyUp( event ) {
19 |
20 | if( event.keyCode === 27 ) {
21 | deactivate();
22 | }
23 |
24 | }
25 |
26 | // Deactivate on click outside
27 | function onDocumentClick( event ) {
28 |
29 | if( event.target === cover ) {
30 | deactivate();
31 | }
32 |
33 | }
34 |
35 | function activate( state ) {
36 |
37 | document.addEventListener( 'keyup', onDocumentKeyUp, false );
38 | document.addEventListener( 'click', onDocumentClick, false );
39 | document.addEventListener( 'touchstart', onDocumentClick, false );
40 |
41 | popup.classList.remove( currentState );
42 | popup.classList.add( 'no-transition' );
43 | if(state)
44 | popup.classList.add( state );
45 |
46 | setTimeout( function() {
47 | popup.classList.remove( 'no-transition' );
48 | container.classList.add( 'avgrund-active' );
49 | }, 0 );
50 |
51 | currentState = state;
52 |
53 | }
54 |
55 | function deactivate() {
56 |
57 | document.removeEventListener( 'keyup', onDocumentKeyUp, false );
58 | document.removeEventListener( 'click', onDocumentClick, false );
59 | document.removeEventListener( 'touchstart', onDocumentClick, false );
60 |
61 | container.classList.remove( 'avgrund-active' );
62 | popup.classList.remove( 'avgrund-popup-animate' );
63 |
64 | }
65 |
66 | function disableBlur() {
67 |
68 | document.documentElement.classList.add( 'no-blur' );
69 |
70 | }
71 |
72 | function show( selector ) {
73 |
74 | popup = document.querySelector( selector );
75 | popup.classList.add( 'avgrund-popup-animate' );
76 | activate();
77 | return this;
78 |
79 | }
80 |
81 | function hide() {
82 |
83 | deactivate();
84 |
85 | }
86 |
87 | return {
88 |
89 | activate: activate,
90 | deactivate: deactivate,
91 | disableBlur: disableBlur,
92 | show: show,
93 | hide: hide
94 |
95 | }
96 |
97 | })();
98 |
--------------------------------------------------------------------------------
/multiple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 57 | 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. 58 |
59 | 60 | 61 |62 | Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 63 | it, not intended for any practical use. 64 |
65 |66 | Avgrund is Swedish for abyss. 67 |
68 | 69 | Created by @hakimel / http://hakim.se 70 | 71 | 72 | 77 |
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------