Avgrund CSS3 and Javascript UI Modal/Popup Window Library

Avgrund CSS3 and Javascript UI Modal/Popup Window Library

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>Avgrund - A modal UI concept</title>

        <meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
        <meta name="author" content="Hakim El Hattab">

        <meta name="viewport" content="width=800, user-scalable=no">

        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

        <link rel="stylesheet" href="css/demo.css">
        <link rel="stylesheet" href="css/avgrund.css">

        <script>
            function openDialog() {
                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>

        <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 the button below to give it a try.
            </p>
            <button onclick="javascript:openDialog();">Open modal</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.
            </p>
            <p>
                <em>Avgrund</em> is Swedish for abyss.
            </p>
            <small>
                Created by Hakim El Hattab<br>
                <a href="https://twitter.com/hakimel">@hakimel</a> — <a href="http://hakim.se/">http://hakim.se</a>
            </small>

            <div class="sharing">
                <a href="https://twitter.com/share" class="twitter-share-button" data-text="Avgrund - a depth-based modal concept from @hakimel" data-url="http://lab.hakim.se/avgrund" data-count="small" data-related="hakimel"></a>

                <iframe id="facebook-button" src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
            </div>
        </article>

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

        <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://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>

        <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>

    </body>
</html>
/*!
 * avgrund 0.1
 * http://lab.hakim.se/avgrund
 * MIT licensed
 *
 * Created by Hakim El Hattab, http://hakim.se
 */

body {
    display: flex;
}

.avgrund-active body {
    transform: scale( 0.9 );
}

.avgrund-cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    background: rgba( 0, 0, 0, 0.5 );
}
    .avgrund-active .avgrund-cover {
        visibility: visible;
        opacity: 1;
    }

.avgrund-contents {
    position: relative;
    padding: 20px;
    max-width: 400px;
    margin: auto;
}
    .avgrund-active .avgrund-contents {
        -webkit-filter: blur(2px);
           -moz-filter: blur(2px);
            -ms-filter: blur(2px);
                filter: blur(2px);
    }
    .no-blur.avgrund-active .avgrund-contents {
        -webkit-filter: none;
           -moz-filter: none;
            -ms-filter: none;
                filter: none;
    }

.avgrund-popup {
    position: absolute;
    width: 440px;
    left: 50%;
    top: 50%;
    margin: -140px 0 0 -220px;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    padding: 30px;

    background: white;
    box-shadow: 0px 0px 60px rgba( 0, 0, 0, 0.3 );
    border-radius: 3px;
    box-sizing: border-box;

    transform: scale( 0.8 );
}
    .avgrund-active .avgrund-popup-animate {
        visibility: visible;
        opacity: 1;

        transform: scale( 1.1111 );
    }
    .avgrund-popup.stack {
        transform: scale( 1.5 );
    }
    .avgrund-active .avgrund-popup.stack {
        transform: scale( 1.1111 );
    }


.avgrund-ready body,
.avgrund-ready .avgrund-contents,
.avgrund-ready .avgrund-popup,
.avgrund-ready .avgrund-cover {
    transform-origin: 50% 50%;
    transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.avgrund-ready .avgrund-popup.no-transition {
    transition: none;
}
/*!
 * Styles intended only for this demo page. If you want to
 * try and use Avgrund in your project, don't include these.
 */

* {
    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: 20px 0 20px 0;
    font-size: 18px;
    line-height: 1.4;
}

a {
    color: #2faeff;
    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: #68c4ff;
    }

small {
    display: block;
    margin-top: 25px;
    padding-top: 25px;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
    border-top: 1px solid #ddd;

    -webkit-text-size-adjust: none;
}

button {
    border: 0px;
    padding: 10px 14px;
    margin: 5px 0px;
    border-radius: 2px;

    cursor: pointer;
    color: #fff;
    background: #2faeff;
    font-size: 18px;

    outline: none;

    -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: #68c4ff;
    }
    button:active {
        background: #18a5ff;
    }
    button+button {
        margin-left: 5px;
    }

.sharing {
    margin-top: 50px;
}

body {
    background: #fff;

    font-family: 'Lato', Helvetica, sans-serif;
    font-size: 16px;
    color: #222;
}
/*!
 * avgrund 0.1
 * http://lab.hakim.se/avgrund
 * MIT licensed
 *
 * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
 */
var Avgrund = (function(){

    var container = document.documentElement,
        popup = document.querySelector( '.avgrund-popup-animate' ),
        cover = document.querySelector( '.avgrund-cover' ),
        currentState = null;

    container.classList.add( 'avgrund-ready' );

    // Deactivate on ESC
    function onDocumentKeyUp( event ) {

        if( event.keyCode === 27 ) {
            deactivate();
        }

    }

    // Deactivate on click outside
    function onDocumentClick( event ) {

        if( event.target === cover ) {
            deactivate();
        }

    }

    function activate( state ) {

        document.addEventListener( 'keyup', onDocumentKeyUp, false );
        document.addEventListener( 'click', onDocumentClick, false );
        document.addEventListener( 'touchstart', onDocumentClick, false );

        popup.classList.remove( currentState );
        popup.classList.add( 'no-transition' );
        if(state)
            popup.classList.add( state );

        setTimeout( function() {
            popup.classList.remove( 'no-transition' );
            container.classList.add( 'avgrund-active' );
        }, 0 );

        currentState = state;

    }

    function deactivate() {

        document.removeEventListener( 'keyup', onDocumentKeyUp, false );
        document.removeEventListener( 'click', onDocumentClick, false );
        document.removeEventListener( 'touchstart', onDocumentClick, false );

        container.classList.remove( 'avgrund-active' );
        popup.classList.remove( 'avgrund-popup-animate' );

    }

    function disableBlur() {

        document.documentElement.classList.add( 'no-blur' );

    }

    function show( selector ) {

        popup = document.querySelector( selector );
        popup.classList.add( 'avgrund-popup-animate' );
        activate();
        return this;

    }

    function hide() {

        deactivate();

    }

    return {

        activate: activate,
        deactivate: deactivate,
        disableBlur: disableBlur,
        show: show,
        hide: hide

    }

})();

Leave a Comment