JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="spacer"></div>
<div class="exploder-button">	<a href="#0" class="btn btn-w-icon res-btn">
							<i class="fa fa-plus-circle"></i>
							<span>Make a reservation</span>
							<span class="btn-alt-text">Powered by OpenTable</span>
						</a>

    <div class="exploder-content">seen on explode
        <button class="implode">Close</button>
    </div>
</div>
<div class="spacer"></div>

CSS

.exploder-button {
    padding: 40px;
}
.exploder-button.active {
}
.exploder-button > .btn {
    display: inline-block;
    height: 40px;
    width: 120px;
    background: red;
    opacity: 1;
    transition: color .2s;
    color: black;
}
.exploder-button.activating > .btn {
    color: transparent;
}
.exploder-button.active > .btn {
    opacity: 0;
}
.exploder-button > .exploder-content {
    position: fixed;
    z-index: -100;
    height: 40px;
    width: 120px;
    margin: 0;
    transition: top .3s, left .3s, margin .3s, height .3s, width .3s;
    opacity: 0;
    background: red;
}
.exploder-button.active > .exploder-content {
    top: 50% !important;
    left: 50% !important;
    margin: -100px 0 0 -200px;
    height: 200px;
    width: 400px;
    opacity: 1;
    z-index: 2;
}
.exploder-button.closing > .exploder-content {
    opacity: 1;
}
.exploder-button.closing > .btn {
    opacity: 0 !important;
}
.spacer {
    display: block;
    height: 900px;
}
}

JavaScript

var exploder = $('.exploder-button');

exploder.each(function () {
    var exploder = $(this),
        exploderButton = $(this).children('.btn'),
        exploderContent = $(this).children('.exploder-content'),
        explodeStart = exploderButton.offset(),
        exploderClose = $('.implode'),
        explodeActive = false;
    
        function runExplodeStart() {
            var scrollTop = $(window).scrollTop(),
                scrollLeft = $(window).scrollLeft();
            exploderContent.css({
                "top": parseFloat(explodeStart.top-scrollTop),
                "left": parseFloat(explodeStart.left-scrollLeft)
            });
        }

        function openExploder() {
            setTimeout(function () {
                exploder.addClass('activating');
            }, 10);
            setTimeout(function () {
                exploder.addClass('active');
            }, 300);
            explodeActive = true;
        }

        function closeExploder() {
            setTimeout(function () {
                exploder.addClass('closing');
            }, 10);
            setTimeout(function () {
                exploder.removeClass('active');
            }, 10);
            setTimeout(function () {
                exploder.removeClass('closing');
            }, 290);
            setTimeout(function () {
                exploder.removeClass('activating');
            }, 300);
            explodeActive = false;
        }

        exploderButton.click(function () {
            runExplodeStart();
            if (explodeActive === false) {
                openExploder();
            } else {
                closeExploder();
            }
            return false;
        });

        exploderClose.click(function () {
            runExplodeStart();
            closeExploder();
            return false;
        });

    });