JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<a class="popup-link" href="#" data-popup-target="#example-popup">Clicca per vedere il popup in azione</a>

<div id="example-popup" class="popup">
    <div class="popup-body">	<span class="popup-exit"></span>

        <div class="popup-content">
            	<h2 class="popup-title">Simple lightweight popup</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper nulla et gravida interdum. Quisque dignissim a turpis at posuere. Praesent cursus turpis magna, quis pulvinar est vehicula</p>
        </div>
    </div>
</div>
<div class="popup-overlay"></div>

CSS

body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    color: #444;
}
.popup-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(196, 196, 196, .85);
    top: 0;
    left: 100%;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}
.overlay .popup-overlay {
    opacity: 1;
    left: 0
}
.popup {
    position: fixed;
    top: 25%;
    left: 50%;
    z-index: -9999;
}
.popup .popup-body {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    opacity: 0;
    min-height: 150px;
    width: 400px;
    margin-left: -200px;
    padding: 20px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    position: relative;
    -moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
    -webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
    box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
    text-align: center;
    border: 1px solid #e9e9e9;
}
.popup.visible, .popup.transitioning {
    z-index:...

JavaScript

jQuery(document).ready(function ($) {

    $('[data-popup-target]').click(function () {
        $('html').addClass('overlay');
        var activePopup = $(this).attr('data-popup-target');
        $(activePopup).addClass('visible');

    });

    $(document).keyup(function (e) {
        if (e.keyCode == 27 && $('html').hasClass('overlay')) {
            clearPopup();
        }
    });

    $('.popup-exit').click(function () {
        clearPopup();

    });

    $('.popup-overlay').click(function () {
        clearPopup();
    });

    function clearPopup() {
        $('.popup.visible').addClass('transitioning').removeClass('visible');
        $('html').removeClass('overlay');

        setTimeout(function () {
            $('.popup').removeClass('transitioning');
        }, 200);
    }

});