Умные люди, помогите пож-та. как ссылку-изображение сделать вроде "модальной"

то есть чтоб оно не так открывалось, а на той же самой странице и закрывалось крестиком или тапом, вот как на 3 картинке. что вставить в мой код или в css это надо? если да, то куда?

По дате

По рейтингу

anti_sovetchik

Искусственный Интеллект

2г

Так:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

 <style> 
    .modal { 
        display: none; 
        position: fixed; 
        z-index: 1; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0, 0, 0, 0.4); 
    } 
    .modal-content { 
        background-color: #fefefe; 
        margin: 15% auto; 
        padding: 20px; 
        border: 1px solid #888; 
        width: 80%; 
    } 
    .close { 
        color: #aaa; 
        float: right; 
        font-size: 28px; 
        font-weight: bold; 
    } 
    .close:hover, 
    .close:focus { 
        color: black; 
        text-decoration: none; 
        cursor: pointer; 
    } 
</style> 
<h1>Модальное окно</h1> 
<a href="#" id="openModal">Окно</a> 
<div id="myModal" class="modal"> 
    <div class="modal-content"> 
        <span class="close">&times;</span> 
        <p>Я - модальное окно</p> 
    </div> 
</div> 
<script> 
    var modal = document.getElementById("myModal"); 
    var btn = document.getElementById("openModal"); 
    var span = document.getElementsByClassName("close")[0]; 
 
    btn.onclick = function() { 
        modal.style.display = "block"; 
    } 
    span.onclick = function() { 
        modal.style.display = "none"; 
    } 
    window.onclick = function(event) { 
        if (event.target == modal) { 
            modal.style.display = "none"; 
        } 
    } 
</script>