modal

basic modal

open modal

dialog header

dialog body text

                
                    <section class='flx flx-center modal-container dis-hidden'>
                        <article class='modal-md txt-primary pd-lg bg-primary'>
                            <h3 class='txt-lg txt-cap'>dialog header</h3>
                            <p class='txt-md txt-cap'>dialog body text</p>
                            <footer class='mg-top-md flx flx-maj-end'>
                                <button class='btn-txt txt-cap txt-ucase mg-right-s dialog-action-btn'>
                                    action 1
                                </button>
                                <button class='btn-solid bg-secondary txt-secondary txt-ucase pd-xs dialog-action-btn'>
                                    action 2
                                </button>
                            </footer>
                        </article>
                    </section>
                
            

modal css

                
                .modal-container {
                    background: rgb(0,0,0,0.4); /* modal container background opacity */
                    width: 100vw;
                    height: 100vh;
                }
                    
                /* modal sizes */
                    
                .modal-s {
                    width: 20rem;
                }
                    
                .modal-md {
                    width: 30rem;
                }
                    
                .modal-lg {
                    width: 40rem;
                }                                  
                
            

modal js

                
                const openDialogBtn = document.querySelector('.open-modal')
                const modalDiv = document.querySelector('.modal')
                const modalContainer = document.querySelector('.modal-container')
                const dialogActionBtn = document.querySelectorAll('.dialog-action-btn')
                
                openDialogBtn.addEventListener('click', () => {
                    modalContainer.classList.remove('dis-hidden')
                    modalContainer.classList.add('pos-fixed')
                    modalContainer.classList.add('tl-0')
                    modalContainer.classList.add('z-5')
                })
                
                dialogActionBtn.forEach(actionBtn => {
                    actionBtn.addEventListener('click', () => {
                        modalContainer.classList.add('dis-hidden')
                        modalContainer.classList.remove('pos-fixed')
                        modalContainer.classList.remove('tl-0')
                        modalContainer.classList.remove('z-5')
                    })
                })