ch j9's questions

function openmodal() {
    document.getElementById("modalopenbackblc").classList.add("open")
}

let openModalbtn0 = document.querySelector("#openModalbtn0")

openModalbtn0.addEventListener("click", openmodal)

document.getElementById("closemodal").addEventListener("click", function() {
    document.getElementById("modalopenbackblc").classList.remove("open")
});

.container1{
        position: absolute;
        display: block;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 205vh;
        background-color: darkblue;
    }


    .midblc{
        position: relative;
        display: block;
        top: 4%;
        left: 0%;
        width: 90%;
        height: 80vh;
        margin: auto;
        margin-bottom: 4%;
        background-color: darkcyan;
    }

    .touchsquaerblc{
        position: relative;
        display: inline-block;
        top: 2%;
        left: 2%;
        width: 20%;
        height: 35vh;
        margin-left: 3%;
        margin-bottom: 3%;
        border-radius: 1vh;
        overflow: hidden;
        cursor: pointer;
        background-color: cornflowerblue;
    }

    .touchsquaerblc:hover{
        transform: scale(1.05);
        transition: 0.5s;
    }

    .touchsquaerblc:not(hover){
        transform: scale(1);
        transition: 0.5s;
    }

    .squaernametxtblc{
        position: absolute;
        display: block;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 5vh;
        vertical-align: top;
        background-color: darkgoldenrod;
    }

    .nametagtxtblc{
        position: relative;
        display: block;
        top: 2%;
        left: 0%;
        width: 100%;
        height: 6vh;
        margin: auto;
        background-color: darkorange;
    }




    .modalbackblc{
        position: fixed;
        display: block;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        transition: opacity .4s, visibility .4s;
        background-color: rgba(27, 27, 27,0.7);
    }

    .modalbackblc.open{
        visibility: visible;
        opacity: 1;
    }

    .modalfrontblc{
        position: sticky;
        display: flex;
        top: 5%;
        left: 0%;
        width: 70%;
        height: 90%;
        border-radius: 2vh;
        transition: transform .3s;
        transform: scale(0.3);
        margin: auto;
        overflow: hidden;
        background-color: #ffffff;
    }

    .modalbackblc.open .modalfrontblc{
        transform: scale(1);
    }

    .modalnametagblc{
        position: absolute;
        display: flex;
        top: 0%;
        left: 0%;
        width: 98.5%;
        height: 6vh;
        background-color: darkcyan;
    }

    .modalclosebtnblc{
        position: absolute;
        display: flex;
        top: 0%;
        right: 0%;
        width: 1.5%;
        height: 100%;
        cursor: pointer;
        background-color: darkred;
    }

    .modaltableservicesblc{
        position: relative;
        display: flexbox;
        top: 7%;
        left: 0%;
        width: 98.5%;
        height: 100%;
        background-color: darkorange;
    }

    .modaltableservices{
        position: relative;
        display: block;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 8%;
        margin-bottom: 0.3%;
        background-color: darkorchid;
    }

<div class="container1">


        <div class="midblc">

            <div id="openModalbtn0" class="touchsquaerblc">
                <div class="squaernametxtblc"></div>
            </div>

        </div>

    </div>

    <div id="modalopenbackblc" class="modalbackblc">

        <div class="modalfrontblc">

            <div class="modalnametagblc"></div>

            <div id="closemodal" class="modalclosebtnblc"></div>

            <div class="modaltableservicesblc">

            </div>

    </div>