JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cn-menu-light-overlay">
    <div id="cn-menu-light-block"></div>
</div>
<div class="test-link">
    <h4>закуска</h4>
    <div class="cn-menu-object" style="display: none;">
        <h4>чтобы это могло быть?</h4>
        <img src="images/menu_object.jpg"></img>
        <ul>
            <li><span>Цена:</span>300 руб</li>
            <li><span>Порция:</span>300 г</li>
            <li><span>Калории:</span>300 кал</li>
            <li><span>Состав:</span>Мука, вода, рис, курица, яйцо, сахар, специи. Все переммешать и выкинуть.</li>
        </ul>
    </div>
</div>

CSS

#cn-menu-light-overlay img { border: none; }
#cn-menu-light-overlay {        display: none;  
    position: absolute;
    top : 0;
    left : 0;
    z-index : 90;
    height : 1500px;
    width : 100%;
    background-image: url(../i/overlay.png); 
}
* html #cn-menu-light-overlay{
    background-color: #333;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../i/overlay"
        , sizingMethod="scale");
}

#cn-menu-light-block {          
    position: absolute;
    top : 100px;
    left : 480px;
    z-index : 100;
    height : 400px;
    width : 400px;
    background-color: #FFF;
}
.test-link:hover { cursor: pointer;}

JavaScript

$(document).ready(function() {
    var content = $('.cn-menu-object').children(),
        wrapper = $('#cn-menu-light-overlay'),
        inner = $('#cn-menu-light-block');

    $('.test-link').click(function() {
        if (content) {
            inner.html(content);
        }
        wrapper.show();
    });

    wrapper.click(function() {
        $(this).hide();
    });
});