JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<ul>
    <li>1 блок
        <p>1 Описание</p>
    </li>
    <li>2 блок
        <p>2 Описание</p>
    </li>
</ul>

CSS

body, html {margin:0;padding:0;font-size:12px;}
.overlay-modal {
position:absolute;
    width:150px;height:100px;border:1px solid #333;
    background:#fafafa;
    color:#000;
    text-align:center;
    left:50%;top:50%;
    margin-left:-76px;
    margin-top:-51px;
}

JavaScript

// Прячим описание и добавляем DOM кнопку
$('ul').find('li').each(function(){
   var srt = $(this).find('p');
    srt.hide().after('<button type="submit">Подробнее</button>');
});

    
// При клике на кнопку
$('button').click(function(){
  // Получаем скрытый контент
  var text = $(this).closest('li').find('p').text();
  $('body').append("<div class='overlay-modal'>"
                   + "<a href='#' class='closed'>x</a>"
                   + "<div id='content'>"+text+"</div>"
                   + "</div>");
});
$(document).on('click', '.closed, .overlay-modal',  function(){
    $('.overlay-modal').remove();
});