Modal Pop Up

Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML


<div class="mdl-container">
    <button class="btn btn-dark" id="open">
        Click here to open the modal!
    </button>

    <div class="mdl-container">
        <div class="mdl">
            <h1>Modal Title</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <button class="btn btn-dark" id="close">Close</button>
        </div>
    </div>
</div>

CSS


.mdl-container {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    color: black;
}

.mdl-container.show {
    opacity: 1; 
    pointer-events: auto;
}

.mdl {
    background: white;
    height: 250px;
    width: 300px;
    max-width: 80%;
    border-radius: 10px;
    padding: 25px;
}

.btn {
    background-color: black;
    color: white;
    padding: 0.5rem;
    border: 1px solid gray;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn:hover {
    box-shadow: 0 0 20px 5px #00ffff;
}


const open = document.getElementById("open");
const close = document.getElementById("close");
const mdl = document.querySelector(".mdl-container");

open.addEventListener("click", () => {
    mdl.classList.add('show')
})
close.addEventListener("click", () => {
    mdl.classList.remove('show')
})