custom modal nice and easy

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.    
</p>


<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.    
</p>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.    
</p>

<button id="modal_button">Open Modal</button>

<div id="the_modal" class="modal">
    <div class="modal-content">
        <div class="close-modal" id="close_modal">❌</div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.    
        </p>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');
        body {background:#1f1f1f; color:#EEE;} 
        * { font-family: 'Inter', sans-serif; }

        .modal {
            display:none;
            position: fixed;
            z-index: 1;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: rgba(0,0,0,0.8);
        }
        .close-modal {
            cursor: pointer;
        }
        .modal-content {
            background:#444;
            color:#CCC;   
            margin:20% auto;      
            width:80%;   
            padding:20px;
        }

Javascript

var modal_button = document.getElementById("modal_button");
    var the_modal = document.getElementById("the_modal");
    var close_modal = document.getElementById("close_modal");

    modal_button.onclick = function() {
        the_modal.style.display = "block";
    }
    close_modal.onclick = function() {
        the_modal.style.display = "none";
    }