JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<link rel="stylesheet" href="http://tympanus.net/Development/ButtonComponentMorph/css/normalize.css">
<link rel="stylesheet" href="http://tympanus.net/Development/ButtonComponentMorph/css/demo.css">
<link rel="stylesheet" href="http://tympanus.net/Development/ButtonComponentMorph/css/component.css">
<link rel="stylesheet" href="http://tympanus.net/Development/ButtonComponentMorph/css/content.css">
<script src="http://tympanus.net/Development/ButtonComponentMorph/js/modernizr.custom.js"></script>
<script src="http://tympanus.net/Development/ButtonComponentMorph/js/classie.js"></script>
<script src="http://tympanus.net/Development/ButtonComponentMorph/js/uiMorphingButton_fixed.js"></script>
<div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
    <button type="button">Signup</button>
    <div class="morph-content">
        <div>
            <div class="content-style-form content-style-form-2">
                <span class="icon icon-close">Close the dialog</span>
                <h2>Sign Up</h2>
                <form>
                    <p><label>Email</label><input type="text" /></p>
                    <p><label>Password</label><input type="password" /></p>
                    <p><label>Repeat Password</label><input type="password" /></p>
                    <p><button>Sign Up</button></p>
                </form>
            </div>
        </div>
    </div>
</div><!-- morph-button -->

JavaScript

(function() {
    var docElem = window.document.documentElement, didScroll, scrollPosition;
    
    // trick to prevent scrolling when opening/closing button
    function noScrollFn() {
        window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
    }
    
    function noScroll() {
        window.removeEventListener( 'scroll', scrollHandler );
        window.addEventListener( 'scroll', noScrollFn );
    }
    
    function scrollFn() {
        window.addEventListener( 'scroll', scrollHandler );
    }
    
    function canScroll() {
        window.removeEventListener( 'scroll', noScrollFn );
        scrollFn();
    }
    
    function scrollHandler() {
        if( !didScroll ) {
            didScroll = true;
            setTimeout( function() { scrollPage(); }, 60 );
        }
    };
    
    function scrollPage() {
        scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
        didScroll = false;
    };
    
    scrollFn();
    
    [].slice.call( document.querySelectorAll( '.morph-button' ) ).forEach( function( bttn ) {
        new UIMorphingButton( bttn, {
            closeEl : '.icon-close',
            onBeforeOpen : function() {
                // don't allow to scroll
                noScroll();
            },
            onAfterOpen : function() {
                // can scroll again
                canScroll();
            },
            onBeforeClose : function() {
                // don't allow to scroll
                noScroll();
            },
            onAfterClose : function() {
                // can scroll again
                canScroll();
            }
        } );
    } );
    
    // for demo purposes only
    [].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) { 
        bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
    } );
})();