JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay  js-overlay"></div>

<!-- Odkazy na prd -->
<a class="show-popup  js-show-popup" data-target="prvni-video">Show no video (Prompts to console)</a>
<a class="show-popup  js-show-popup">Show no video again (Prompts to console)</a>

<!-- Odkaz na "druhe-video" -->
<a class="show-popup  js-show-popup" data-target="druhe-video">Show video</a>

<!-- Odkaz na "obrazek" -->
<a class="show-popup  js-show-popup" data-target="obrazek">Show image</a>

<!-- Popup pro "obrázek" -->
<div class="popup  js-popup  js-popup-obrazek" data-width="512" data-height="333">
    <a title="By Scott Bauer, USDA ARS [Public domain], via Wikimedia Commons"><img width="512" alt="Patates" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Patates.jpg/512px-Patates.jpg"/></a>
</div>

<!-- Popup pro "druhe-video" -->
<div class="popup  js-popup  js-popup-druhe-video" data-width="560" data-height="315">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/y6120QOlsfU" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.popup{
    padding: 10px;
    position: fixed;
    left: 50%;
    top:  50%;
    display: none;
    background-color: #f9f9f9;
}
.popup-close{
    height: 17px;
    width:  17px;
    margin: -20px;
    float: right;
    background-color: #111;
    border: 3px solid #fff;
    border-radius: 10px;
}
.overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top:  0;
    display: none;
    background-color: #000;
    opacity: .8;
}
.show-popup{
    width: 100%;
    padding: 20px 0;
    margin-top: 10px;
    display: block;
    color: #fff;
    text-align: center;
    background-color: #333;
}
}

JavaScript

var overlay,
    popup;

overlay = $( ".js-overlay" );
popups =  $( ".js-popup" );

// Při kliknutí na "něco" s třídou js-show popup zobrazí popup
$( document ).on( "click", ".js-show-popup", function() {
    
    // Element do proměnné
    var element = $( this );
    
    // Když nemá "data-target" attribut, tak ukončit
    if ( element.data( "target" ) == undefined ){
        console.log( "No target defined" );
        return;
    }
    
    // Najdeme to, co se má zobrazit
    var target = $( ".js-popup-" + element.data( "target" ) );
    
    // Když to neexistuje, tak to nezobrazíme (docela rošťárna)
    if ( target.length == 0 ){
        console.log( "Target does not exist" );
        return;
    }
    
    // Přidáme křížek
    target.append( "<div class=\"popup-close  js-hide-popup\"></div>" );
    
    // Nastavit výšku, šířku a odsazení, poté zobrazit
    target
        .height( target.data( "height" ) )
        .width( target.data( "width" ) )
        .css({
            "margin-left": ( -target.data( "width" )  / 2 - 10 ) + "px",
            "margin-top":  ( -target.data( "height" ) / 2 - 10 ) + "px",
        })
        .fadeIn( 500 );
    overlay.fadeIn( 500 );
});

// Schovat popup při kliknutí na křížek
$( document ).on( "click", ".js-hide-popup", hidePopup );

// Schovat popup při klinutí jinam než na popup
$( ".js-overlay" ).on( "click", hidePopup );

/// Funkce pro schování
function hidePopup(){
    overlay.fadeOut( 200 );
    $( ".js-popup" ).fadeOut( 200 );
    setTimeout( function(){ $( ".js-hide-popup" ).remove(); }, 200 );
    
}