JSFiddle - React, Tailwind, and code Playground

by shekyb

HTML

<div class="blured">
    
</div>
<div class="slide-up">
        <div class="slide-wrapper">
            <div class="slide-background"></div>
            <div class="slide-content">
                 <h2>Pop up title</h2>

                <p>Pretty neat!</p>
            </div>
        </div>
    </div>
<div class="wrapper">
    <div class="content">
         <h1>Some title</h1>

        <div class="image">
            <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpf1/t1.0-9/1970856_10152030148361239_1864148173_n.jpg" />
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit. Morbi scelerisque augue libero, ac posuere elit luctus vel. Ut ut egestas mi, sed euismod lacus. Nulla tristique tortor id tortor semper semper. Maecenas lacinia leo tortor, vel interdum mauris consequat in.</p>
    </div> <a class="trigger" href="#">trigger slide</a>

</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Verdana', sans-serif;
    color: #333;
}
.wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 100;
    background: #eee;
}
img {
    width: 100%;
    height: auto;
}
.blured {
    top: 0;
    height: 0;
    width: 100%;
    -webkit-filter: blur(3px);
    position: absolute;
    overflow: hidden;
    z-index: 1000;
}
.content {
    width: 300px;
    margin: 0 auto;
}
.slide-up {
    top:100px;
    position: absolute;
    width: 100%;
    z-index: 2000;
    display: none;
    height: auto;
    overflow: hidden;
}
.slide-wrapper {
    width: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    border: 1px solid #fff;
}
.slide-content {
    z-index: 2222;
    position: relative;
}
.slide-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
    opacity: 0.7;
}

JavaScript

var height = $('.slide-up').outerHeight();
var background = $('.wrapper').css("background");
$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) {
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(500);
        $(this).removeClass('triggered');

    } else {
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-up').offset();
        $('.blured').animate({
            height: $offset.top + height + 'px'
        }, 500);
        $(this).addClass('triggered');
    }
});