JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal-1" class="modal">
    <div class="modal-button" data-button_id="1">
        <img src="http://i.imgur.com/Azlry7X.png">
    </div>
    <div class="modal-content-wrapper" id="modal_wrapper_1">
        <div class="modal-content " id="modal_content_1" style="top: 179.5px;">
            <iframe src="https://player.vimeo.com/video/57005606?color=ff503f&amp;title=0&amp;byline=0&amp;portrait=0" width="100%" height="550px" frameborder="0" allowfullscreen=""></iframe>
            <div class="modal-close"></div>
        </div>
    </div>
</div>

CSS

.modal {
    display: block;
}
.modal .modal-button {
    cursor: pointer;
    display: inline-block;
}
.modal-content-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(34, 34, 34);
    background: rgba(34, 34, 34, 0.85);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.modal-content-wrapper.opened {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.modal-content-wrapper .modal-content {
    position: fixed;
    width: 50%;
    left: 25%;
    background: #fff;
    padding: 20px;
    text-align: left;
}
.modal-content-wrapper .modal-content .modal-close {
    width: 52px;
    height: 52px;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: -60px;
    cursor: pointer;
    background: #222;
    text-align: center;
}
.modal-content-wrapper .modal-content .modal-close:after {
    content:"X";
    font-family:Arial;
    line-height: 52px;
    color: #fefefe;
    font-size: 20px;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

JavaScript

//Modal element

var $modal_content_wrapper = $('.modal-content-wrapper');
var $modal_content = $('.modal-content');
var $modal_button = $('.modal-button');
var $modal_button_close = $('.modal-close');

$modal_content.each(function () {
    $(this).css('top', ($(window).height() - $(this).outerHeight(true)) / 2);
});

$modal_button.each(function () {
    var $button = $(this);
    $button.on('click', function () {
        var id = $button.data('button_id');
        if ($('#modal_wrapper_' + id, '.modal').length == 1) {
            $('#modal_wrapper_' + id).detach().appendTo('body').addClass('opened');
        } else {
            $('#modal_wrapper_' + id).addClass('opened');
        }
    });
});

($modal_button_close, $modal_content_wrapper).on('click', function () {
    $modal_content_wrapper.removeClass('opened');
});

$(document).keyup(function (e) {
    if (e.keyCode === 27) {
        $modal_content_wrapper.removeClass('opened');
    }
});