modal.js

document.addEventListener( "click", e => modalToggle(e) );

function modalToggle(e) {

    const btn = e.target.closest("[data-toggle='modal']");
    
    if(!btn) {

        if(e.target.closest("[data-event='close']")) {
            e.target.closest(".modal.show").classList.remove("show");
        }

        if(e.target.closest(".modal.show")) {
            e.target.classList.remove("show");
        }

        return;
    }

    let modalTarget = btn.getAttribute("data-target");
    let modal = document.getElementById(modalTarget);

    modal.classList.toggle("show");

}

modal.pug

button(class="btn btn-icon", data-toggle="modal", data-target="111")
    i(class="material-icons outlined md-18")
div(class="modal", id="111")
    div(class="modal-dialog")
        div(class="modal-content")
            div(class="model-header")
                div(class="model-title") Lorem ipsum dolor sit.
                button(class="btn btn-icon", data-event="close")
                    i(class="material-icons outlined md-18") close
            div(class="modal-body").
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem ducimus 
                voluptatum aut consequuntur delectus officiis nisi reprehenderit, 
                distinctio vel et dolores accusamus similique, explicabo repudiandae asperiores laborum nemo quasi velit!
            div(class="modal-footer")
                button(class="btn btn-success") Отправить

style.scss

.modal {

    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1050;
    background-color: rgb(0 0 0 / 50%);

    .modal-dialog {

        position: relative;
        width: auto;
        margin: 0.5rem;
        pointer-events: none;

        @media (min-width: 576px) {
            max-width: 500px;
            margin: 1.75rem auto;
        }

        .modal-content {

            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 3px;
            background-color: #f7f7f7;
            pointer-events: auto;

            .model-header {

                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 10px;
                border-bottom: 1px solid #e7e8ec;

                .model-title {
                    font-size: 18px;
                    font-weight: 500;
                }

            }

            .modal-body {
                padding: 15px 10px;
            }

            .modal-footer {
                display: flex;
                align-items: center;
                padding: 15px 10px;
                border-top: 1px solid #e7e8ec;
            }

        }

    }

}