<!-- Model Example -->
<button class="btn-primary btn btn-py-1" id="showModalBtn">Show Modal</button>

<!-- Model Container -->
<div class="modal hide md-effect-1" id="modalExample">
    <div class="modal-container card-py modal-width-80">
        <div class="flex flex-between  flex-align-item-center pt-1 pb-1">
            <h1 class="font-mid-bold card-header-text">Modal Header</h1>
            <span
                class="material-icons  card-close-btn flex flex-justify-center flex-align-item-center"
                id="modalCloseBtn">close</span>
        </div>
        <div class="card-mb-1 model-content py-1">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat quod consectetur
            placeat aperiam, explicabo omnis. Labore voluptas pariatur, cum sint eligendi quas iste
            dicta? Illum voluptates amet ipsa hic, totam ratione ab neque, molestiae explicabo
            cupiditate possimus corrupti dicta fugit in soluta optio architecto, consequuntur
            minima. Quis beatae quas dolores reiciendis odit magni dignissimos? Numquam enim vel,
            commodi aspernatur, consequatur maiores ut ipsum placeat voluptatem vero quam unde

        </div>
        <div class="flex  pt-1 pb-1 flex-justify-end">
            <button class="btn-primary btn btn-sm ">Submit</button>
        </div>
    </div>
</div>

<!-- Model Example -->
const modal = document.querySelector('#modalExample');
const modalCloseBtn = document.querySelector('#modalCloseBtn');
const showModalBtn = document.querySelector('#showModalBtn');

showModalBtn.addEventListener('click',()=> modal.classList.remove('hide'));
modalCloseBtn.addEventListener('click',()=> modal.classList.add('hide'));

// activates listener when user click outside of modal and hide modal.
window.addEventListener('click',(e)=> (e.target === modal)? modal.classList.add('hide'):'')

<!-- Footer Model Example -->
<button class="btn-primary btn btn-py-1" id="showModalBtn1">Show Footer Modal</button>

<!-- Model Container -->
<div class="modal hide md-effect-1 flex flex-space-evenly" id="modalFooterExample1">
    <div class="model-container-bottom ">

        <div class="flex flex-between  flex-align-item-center pt-1 pb-1 my-1">
            <h1 class=" font-mid-bold card-header-text ">Check-Out</h1>
            <span
                class="material-icons  card-close-btn flex flex-justify-center flex-align-item-center"
                id="modalFooterCloseBtn1">close</span>
        </div>
        <div class="card-mb-1  py-1 ">
            <div class="flex flex-column model-content-footer">
                <div class="flex flex-wrap flex-row  gap">
                    <ul class="list-style-none notification-container width-full card-py">
                        <div class="flex">
                            <div class="mr-1 flex">
                                <img src="../components/img/list-food.jfif"
                                    class="notification-img" alt="chicken-tandoori" loading="lazy"
                                    srcset="">
                            </div>
                            <div class="flex flex-column flex-space-evenly">
                                <span class="font-bold pb-1">Your food is on its way.</span>
                                <span class="font-mid-light pb-04">Order id : <span
                                        class="col-dark">#5421112</span></span>
                                <span class="font-mid-light pb-04">Time : <span
                                        class=" col-dark">10.50PM</span></span>
                                <span class="font-mid-light pb-04">Total Amount : <span
                                        class="col-dark">$50</span>
                                </span>
                            </div>
                        </div>

                    </ul>

                </div>

            </div>
            <button class="btn-primary btn btn-py-1 mt-1 flex flex-justify-center width-full ">
                <span class="font-size-sm"> Check-Out </span>
            </button>
        </div>

    </div>
</div>

const modal2 = document.querySelector('#modalFooterExample1');
const modalCloseBtn2 = document.querySelector('#modalFooterCloseBtn1');
const showModalBtn2 = document.querySelector('#showModalBtn1');
showModalBtn2.addEventListener('click',()=> modal2.classList.remove('hide'));
modalCloseBtn2.addEventListener('click',()=> modal2.classList.add('hide'));