JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<p><input type="button" value="Popup #1" class="popup__trigger" data-index="1" /></p>
<div class="popup__overlay" data-accord="1">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>Some content into first popup</h2>
    </div>
</div>

<p><input type="button" value="Popup #2" class="popup__trigger" data-index="2" /></p>
<div class="popup__overlay" data-accord="2">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>And this is another popup!</h2> 
    </div> 
</div>

CSS

p {
    margin: 1em 0;
    text-align: center
    } 
.popup__overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    text-align: center
    }
    .popup__overlay:after {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: ''
        }

    /* Added for IE<9 compatibility */
    .popup__overlay_ie {
        background: #000;
        opacity: .7;
        filter: alpha(opacity=70)
        }
.popup {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    max-width: 80%;
    padding: 20px;
    border: 5px solid #fff;
    border-radius: 15px;
    box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
    background: #fff;
    vertical-align: middle
    }

/* Added instead of :after pseudoelement */
.popup__valignfix {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    height: 100%;
    vertical-align: middle
    }

input[type="button"] {
    padding: 6px 16px;
    border: 0;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
    box-shadow:         inset 0 1px 1px rgba(255,255,255,.3);
    cursor: pointer;
    background: #444;
    background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:    -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:     -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:      -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:         linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    color: #fff
    }
.popup__close {
    display: block;
    position: absolute;
    top: -20px;
    right: 10px;
    width: 12px;
    height: 12px;
    padding: 8px;
    border: 5px solid #fff;
   ...

JavaScript

$('.popup__trigger').click(function() {
    $('.popup__overlay[data-accord=' + $(this).data('index') + ']').css('display', 'block')
})
$('.popup__overlay').click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $('.popup__overlay').css('display', 'none')
    }
})
$('.popup__close').click(function() {
    $('.popup__overlay').css('display', 'none')
})