• HTML
• CSS
• JS

HTML

<section class="container">
    <button class="show-modal">Show Modal</button>
    <div class="modal">
        <h1>FrontLab</h1>
        <p>
            Lorem ipsum dolor sit amet consectur adipisicing elit.Quo dicta amet ratione.Animi wash totam tempora laboriosam provident nihil eum! Saepe?
        </p>
        <button class="close-modal">Close</button>
    </div>
</section>
<div class="modal-bg"></div>

CSS

/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,400;1,500;1,600&display=swap');

*{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
}

.container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.show-modal{
    padding:10px 20px;
    border:none;
    background:#8b25ff;
    color:#fff;
    border-radius:5px;
    font-size:16px;
    cursor:pointer;
}

.modal{
    position:absolute;
    display:flex;
    flex-direction:column;
    gap:15px;
    width:300px;
    background:#fff;
    padding:20px;
    border-radius:10px;
    left:50%;
    top:50%;
    transform:translate(-50%,-100%);
    visibility:hidden;
    opacity:0;
    transition:all 0.3s ease-in;
}

.close-modal{
    padding:5px 15px;
    border:none;
    color:#fff;
    background:#8b25ff;
    border-radius:5px;
    cursor:pointer;
}

.modal-bg{
    background:rgba(0,0,0,0.65);
    position:absolute;
    width:100%;
    height:100%;
    z-index:-1;
    visibility:hidden;
    opacity:0;
}

.container.active .modal{
    visibility:visible;
    opacity:1;
    transform:translate(-50%,-50%);
}

.modal-bg.active{
    visibility:visible;
    opacity:1;
}

JS

const showModal = document.querySelector(".show-modal"),
    closeModal = document.querySelector(".close-modal"),
    modalContainer = document.querySelector(".container"),
    modalBg = document.querySelector(".modal-bg");
    
showModal.addEventListener("click", () => {
    modalContainer.classList.add("active")
    modalBg.classList.add("active")
});

closeModal.addEventListener("click", () => {
    modalContainer.classList.remove("active")
    modalBg.classList.remove("active")
});

modalBg.addEventListener("click", () => {
    modalContainer.classList.remove("active")
    modalBg.classList.remove("active")
});

/* All credits to: https://www.youtube.com/watch?v=sHE6N2N4E3M */