DEV Community

Cover image for Modal_002
GiandoDev
GiandoDev

Posted on

Modal_002

Html:

<div class="container">
    <button class="btn-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="250px" height="250px"><path fill="#ff5576" d="M64 9A55 55 0 1 0 64 119A55 55 0 1 0 64 9Z"/><path fill="#fff" d="M18,50.1c-0.3,0-0.7-0.1-1-0.2c-1.6-0.6-2.4-2.3-1.8-3.9C20.6,31.2,32.9,19.4,48,14.5 c1.6-0.5,3.3,0.4,3.8,1.9c0.5,1.6-0.3,3.3-1.9,3.8c-13.3,4.3-24.2,14.8-29,27.9C20.4,49.4,19.2,50.1,18,50.1z"/><path fill="#d32f56" d="M64,116c-1.7,0-3-1.3-3-3s1.3-3,3-3c25.4,0,46-20.6,46-46c0-1.7,1.3-3,3-3s3,1.3,3,3 C116,92.7,92.7,116,64,116z"/><path fill="#444b54" d="M64,122C32,122,6,96,6,64S32,6,64,6s58,26,58,58S96,122,64,122z M64,12c-28.7,0-52,23.3-52,52s23.3,52,52,52 s52-23.3,52-52S92.7,12,64,12z"/><path fill="#444b54" d="M64,102c-21,0-38-17-38-38c0-1.7,1.3-3,3-3s3,1.3,3,3c0,17.6,14.4,32,32,32s32-14.4,32-32S81.6,32,64,32 c-8.5,0-16.6,3.3-22.6,9.4c-1.2,1.2-3.1,1.2-4.2,0c-1.2-1.2-1.2-3.1,0-4.2C44.3,30,53.8,26,64,26c21,0,38,17,38,38S85,102,64,102z"/><path fill="#fff" d="M49.9 60A4 4 0 1 0 49.9 68A4 4 0 1 0 49.9 60Z" transform="rotate(-45.001 49.857 64)"/><path fill="#fff" d="M64 74.1A4 4 0 1 0 64 82.1A4 4 0 1 0 64 74.1Z" transform="rotate(-45.001 64 78.143)"/><path fill="#fff" d="M78.1 60A4 4 0 1 0 78.1 68A4 4 0 1 0 78.1 60Z" transform="rotate(-45.001 78.142 64.001)"/><path fill="#fff" d="M64 45.9A4 4 0 1 0 64 53.9A4 4 0 1 0 64 45.9Z" transform="rotate(-45.001 64 49.859)"/><path fill="#fff" d="M15 61A3 3 0 1 0 15 67A3 3 0 1 0 15 61Z"/></svg>
        <h2>Click Me</h2>
    </button>
</div>
<div class="modal-overlay">
    <button class="btn-modal">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="144px" height="144px"><path fill="#536dfe" d="M44,23c0,10.492-8.956,19-20,19S4,33.492,4,23S12.956,4,24,4S44,12.508,44,23z"/><path fill="#3f51b5" d="M24,39C13.704,39,4.329,32.156,4.029,22.473C4,23.313,4,24.18,4,25c0,10.492,8.956,19,20,19s20-8.508,20-19c0-0.594,0-1.203-0.012-1.816C43.873,33.012,34.461,39,24,39z"/><path fill="#e8eaf6" d="M23.992,18.984L27,13h5l-5.176,8.926L32,31h-5.016L24,25l-3,6h-5l5.16-9.074L16,13h5L23.992,18.984z"/></svg>
    </button>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="240px" height="240px"><path fill="#D6E5E5" d="M426.4 294.7c0-.2.2-.9.2-1-.1-1.3-.2-4-1.4-4.9-1.2-.9-3.4.2-5.3 1.7.7 1.3.7 2.8.3 4.2.4.2.7.3 1.1.5 0 0 1.5.3 1.7.4.5.1.7.1.7.1 0 0 .2 0 .7-.1 1.1-.1 1.2 0 2-.6C426.1 295.1 426.3 294.9 426.4 294.7zM421.5 230.7c-1-9.4-2.9-19-3-28.4 0-6.3-.1-12.7-1.2-18.9-.2-1.2-.5-4.3-1.6-4.8-2.3-1-5.8-1-7.6 1-.3.4-.7.7-1 .9.2.6.4 1.3.4 2 .3 26.2 12.1 50.7 12 76.9 0 0 0 0 .1 0 1.3-.1 2.6-.3 3.9-.6C423.2 249.5 422.5 240.1 421.5 230.7zM368.5 259.4c-.8-12.6-2.6-25.4-6.6-37.4-3.4-10.3-8.3-21.3-18.5-26.5-9.1-4.6-16.4-1.6-21 7 0 1.6-.1 3.2-.1 4.9-.1 5.7 0 11.5.6 17.2 1.1 11.2 2.5 22.5 4.5 33.5 1.6 9.2 3.7 18.7 7.8 27.2 3 6.2 8.3 13.7 16.2 12.6 7.5-1.1 11.7-9.9 14-16.1C368 274.5 369 267.1 368.5 259.4z"/><path fill="#D6E5E5" d="M471,203.2c-4-21.2-10.7-45.2-27.2-60.3C425,125.7,397.6,123,373.2,124c-28.1,1.1-56,5.9-84.1,8.3c-16.3,1.4-32.7,2.4-49.1,2.2c-15.8-0.3-31.5-2.1-47.2-3.6c-30.8-3-62.6-4-91.7,8.4c-21.5,9.2-39.4,25.5-50.7,46C38.5,207,32.8,232,34.2,256.7c1.5,28.8,11.5,55.8,26.4,80.2c0.4,0.6,0.6,1.2,0.7,1.7c1.7,2.7,1.4,6.9-2.5,8.5c-8.6,3.6-11.7,14.8-12.9,23.2c-1.4,9.4-1.3,19.7,2.4,28.6c5.1,12.1,14.1,23,26,28.8c3.4,1.7,7,3.3,10.6,4.5c-1.8-2.9-3.3-6-4.3-9.3c-3.2-9.7-5.1-21.8-2-31.9c6.9-22.7,29.6-33.1,50.7-39.3c1.9-0.6,3.5-0.2,4.8,0.7c11.4,0.2,22.8,1.3,34.1,2c11.5,0.7,23,1.5,34.5,2.2c23.9,1.6,47.7,2.5,71.7,1.2c30.5-1.6,60.6-6.2,90.9-10.6c25.2-3.7,52.2-7.5,74.7-20.4c10.4-6,19.5-13.6,25.3-24.2c5.5-10,8.6-21,10-32.4C477.9,248.1,475.2,225.1,471,203.2z M132.5,296.6c0,5.9-9.1,8.7-10.7,2.2c-3.9-16.3-4-33.1-7.1-49.5c-2.9,1.9-6.1,3.2-9.9,3.8c-5.1,0.8-10.3,0.4-15.4-0.1c0.8,8.2,1.3,16.5,1.9,24.7c0.4,5.5,1.3,11.3,1.2,16.8c-0.1,4.2-0.9,8.6,0.7,12.6c2.7,6.6-7.7,10.2-10.4,3.6c-1.9-4.5-1.4-9-1.3-13.7c0.1-5.5-0.7-11.1-1.1-16.6c-0.7-9.5-1.2-19-2.2-28.4c-4.2-1.7-4.8-8.1-1.2-10c-2-16.1-4.5-32.4-4.6-48.7c0-7.1,10.9-7.9,11-0.8c0.1,16.6,2.7,33.1,4.7,49.5c8.8,0.8,18,1.5,23.6-5.1c-3.2-12.4-6.5-27-0.7-38.5c2.3-4.6,9.4-3.6,10.3,1.3c1.8,2.9,0.5,6.5-1.9,8.1c-0.9,4.8-0.2,10,0.5,14.6c0.5,3,1.1,6,1.8,8.9c2.3,1.3,3.7,4,2.2,7c-0.1,0.2-0.2,0.4-0.3,0.6c0.3,1,0.5,2,0.8,3c4.1,15.7,3.7,32.1,6.7,48c0.8,0.8,1.4,2,1.4,3.6V296.6z M155.1,232.2c0.4,3.7,0.7,7.5,1,11.3c10.4-0.1,20.7-0.8,31,1.1c7,1.3,4.9,12.1-2.1,10.8c-9.3-1.7-18.7-1-28.1-0.9c0.5,7.7,0.9,15.5,1.4,23.2c0.4,5.3,0.6,10.6,1.1,15.9c0.4,4.4,0.5,10.2,3.2,14c1,1.3,0.6,1.3,2.1,1.7c1.9,0.5,3.8,0.9,5.7,1c1.3,0.1,6.3,0.3,6.7-0.8c2.9-6.5,12.7-1.6,9.9,4.9c-4.1,9.3-19.7,8-27.3,4.7c-10.7-4.7-11.1-20-11.6-29.9c-0.9-17.3-2-34.6-3.5-51.9c-1.2-14.6-5.2-29.9-1.9-44.5c0.2-0.8,0.5-1.5,0.9-2.1c0.1-1.8,1.2-3.5,3.7-4.1c7.7-1.8,15.8-2.4,23.7-1.9c7.1,0.4,15.3,1.8,19.7,8c4.1,5.8-5,11.9-9.1,6.2c-2.6-3.6-10.9-3.4-14.8-3.4c-4.5,0-9.1,0.2-13.6,1C151,208.4,153.8,220.6,155.1,232.2z M241.4,315.5c-11.5,1.2-22.1-3.2-25.2-15.2c-1.9-7.4-2.2-15.1-3.3-22.6c-1.3-9-2.6-18.1-3.9-27.1c-2.7-18.7-5.3-37.3-6.5-56.2c-0.5-7.1,10.5-7.9,11-0.8c1.9,29.9,7.3,59.4,11.2,89.1c0.8,6.2,0,20.1,8.4,21.7c3.8,0.7,9.8,0.9,13.1-1.5c2.9-2.1,3.2-6.1,3.2-9.4c0.1-7,11.1-7.9,11-0.8C260.3,305.2,254.6,314.1,241.4,315.5z M307.4,289c-0.8,8.8,2.9,24.7-10.5,25.7c-13.4,1-22.1-9-25.3-21c-4.4-16.2-6.4-33.4-9.1-49.9c-3.4-20.1-6.8-40.2-11.7-60c-1.7-6.8,8.7-10.5,10.4-3.6c8.1,32.7,12.9,66.2,18.6,99.3c1.3,7.3,2.7,22.2,12,23.9c4.3,0.8,4.7,1.3,4.7-3.2c0-4.4-0.4-8.8,0-13.2C297.2,279.9,308,282.1,307.4,289z M374,289.6c-3.4,7.4-8.8,15.4-16.9,18.1c-8,2.7-17.3,0.6-23.3-5.4c-12.9-13-16.2-33.8-18.6-51.1c-1.9-13.6-4.3-27.3-3.9-41.1c0.1-4.6-0.7-10.5,0.7-14.9c0.9-2.9,3.2-4.9,5.7-5.2c3.2-3.5,7.1-6.2,12-7.3c7-1.6,14.7,0.2,20.6,4.1c15.6,10.2,21.8,27.6,25.6,45.2C379.9,251.1,382.3,271.3,374,289.6z M399.9,172.4c6.1-6.8,18.6-7.6,24.7-0.4c4.5,5.2,4.5,14.7,4.7,21.2c1,23.2,5.1,46.2,5.2,69.5c0,2.5-1.2,4.8-3.7,5.6c-3.4,1.1-6.8,2.1-10.4,2.3c-2.8,0.2-4.6-1.4-5.3-3.4c-3.1,0.8-6.7-0.6-6.6-4.6c0.7-27-11.7-52.1-12-79c0-2.3,1.1-4,2.7-4.9C398.2,176.7,398,174.4,399.9,172.4z M434,302.8c-7.7,7.1-25.6,2.3-25.3-7.5c-2.1-1.3-3.3-3.9-1.6-6.7c4.6-7.4,17.3-15.8,25.4-8.1C437.9,285.7,440.1,297.1,434,302.8z M436.5,156.1c0.1,1.3-0.3-0.2-0.7-0.7c-0.5-0.6-1.1-1.2-1.7-1.7c-2-1.8-4.1-3.6-6.4-5.1c-3.8-2.6-7.8-4.5-12.1-6c-13.2-4.6-28.9-0.6-42.4,0.7c-8.5,0.8-17.1,2-25.6,3.1c-7.8,1-15.9,1.3-23.7,2.8c-4.9,0.9-9.9,1.1-14.8,1.6c-3.7,0.3-9.5,0.2-12.5,2c-6.1,3.6-12.3-5.5-6.2-9.1c4.9-2.8,11-3.2,16.5-3.7c6-0.5,11.9-1.3,17.9-1.9c18.4-1.8,36.9-4.3,55.3-6.5c14.6-1.7,30.8-3.8,44.6,2.7c7.8,3.7,21.7,11.4,22.8,21C448.3,162.3,437.3,163.1,436.5,156.1z"/><path d="M487.2,250.1c-0.2-22.2-3.6-45.1-9.4-66.5c-5.7-21.3-16.1-42.9-35-55.4c-21.6-14.3-48.5-16.2-73.6-15c-28.4,1.3-56.5,6.2-84.8,8.5c-16.3,1.4-32.7,2.1-49.1,1.7c-16-0.4-31.8-2.7-47.8-4.1c-30.5-2.7-61.3-2.3-90,9.5c-21.9,9-39.7,24.8-52.6,44.4c-15.3,23.2-22,51.5-21.8,79c0.2,31.1,10.9,61,26.6,87.6c-8.1,6-12.2,16-14.1,25.9c-2.4,11.9-2.1,25.3,2.4,36.7c5.9,15,17.2,27.6,31.5,35c8.4,4.4,23,10.9,33.4,7.9c2.1,0.3,3.8-0.7,4.7-2.2c5-3.8,0-11.7-5.4-9.5c-6.9-3-10.2-11-12.2-17.9c-2.2-7.8-2.8-17.2,0.2-24.9c6.2-16,24.6-23.3,40.1-28.1c0.7,0.3,1.5,0.5,2.3,0.5c7.6,0,15.2,1,22.8,1.3c8.6,0.4,17.2,0.9,25.9,1.5c15.9,1,31.8,2.2,47.7,2.9c32.1,1.5,64.2-0.8,96-4.9c27-3.4,54.4-6.9,80.9-13.1c23.8-5.6,49-15.4,64.1-35.5C483.9,297,487.3,272.8,487.2,250.1z M475.2,270.4c-1.4,11.4-4.5,22.4-10,32.4c-5.9,10.6-14.9,18.3-25.3,24.2c-22.5,12.9-49.5,16.7-74.7,20.4c-30.2,4.4-60.3,8.9-90.9,10.6c-23.9,1.3-47.8,0.4-71.7-1.2c-11.5-0.8-23-1.6-34.5-2.2c-11.4-0.7-22.8-1.8-34.1-2c-1.2-0.9-2.9-1.3-4.8-0.7c-21.1,6.3-43.8,16.6-50.7,39.3c-3.1,10-1.2,22.1,2,31.9c1.1,3.3,2.5,6.4,4.3,9.3c-3.6-1.2-7.2-2.8-10.6-4.5C62.3,422,53.3,411,48.3,399c-3.7-8.9-3.7-19.2-2.4-28.6c1.2-8.4,4.3-19.6,12.9-23.2c3.8-1.6,4.2-5.9,2.5-8.5c-0.1-0.6-0.4-1.2-0.7-1.7c-14.9-24.5-24.9-51.5-26.4-80.2c-1.3-24.7,4.3-49.7,16.2-71.3c11.3-20.5,29.2-36.9,50.7-46c29.1-12.4,60.9-11.4,91.7-8.4c15.8,1.5,31.4,3.4,47.2,3.6c16.4,0.3,32.8-0.7,49.1-2.2c28-2.4,55.9-7.2,84.1-8.3c24.4-1,51.8,1.7,70.7,18.9C460.4,158,467,182,471,203.2C475.2,225.1,477.9,248.1,475.2,270.4z"/><path d="M131.1 290c-3-15.9-2.7-32.3-6.7-48-.3-1-.5-2-.8-3 .1-.2.2-.4.3-.6 1.5-3 .1-5.7-2.2-7-.7-3-1.3-5.9-1.8-8.9-.7-4.6-1.5-9.8-.5-14.6 2.4-1.6 3.8-5.2 1.9-8.1-.9-4.9-8-5.8-10.3-1.3-5.8 11.5-2.5 26.1.7 38.5-5.6 6.6-14.8 5.9-23.6 5.1-2-16.4-4.6-33-4.7-49.5 0-7.1-11-6.2-11 .8.1 16.3 2.5 32.5 4.6 48.7-3.6 1.9-3 8.3 1.2 10 1 9.4 1.5 18.9 2.2 28.4.4 5.5 1.2 11.1 1.1 16.6-.1 4.8-.5 9.2 1.3 13.7 2.7 6.5 13.1 2.9 10.4-3.6-1.6-4-.8-8.4-.7-12.6.1-5.5-.8-11.3-1.2-16.8-.6-8.3-1.1-16.5-1.9-24.7 5.2.4 10.3.8 15.4.1 3.7-.6 7-1.9 9.9-3.8 3.1 16.4 3.2 33.2 7.1 49.5 1.5 6.4 10.7 3.6 10.7-2.2v-3C132.5 292 131.9 290.8 131.1 290zM187 244.6c-10.3-1.9-20.6-1.2-31-1.1-.3-3.8-.6-7.5-1-11.3-1.2-11.6-4.1-23.9-2-35.5 4.4-.8 9.1-1 13.6-1 3.9 0 12.2-.3 14.8 3.4 4.1 5.8 13.2-.4 9.1-6.2-4.4-6.2-12.6-7.6-19.7-8-7.9-.5-16 .1-23.7 1.9-2.4.6-3.5 2.2-3.7 4.1-.4.6-.7 1.3-.9 2.1-3.3 14.6.7 29.8 1.9 44.5 1.4 17.2 2.5 34.6 3.5 51.9.5 9.9.9 25.2 11.6 29.9 7.6 3.3 23.2 4.6 27.3-4.7 2.9-6.5-7-11.4-9.9-4.9-.5 1.1-5.4.9-6.7.8-1.9-.1-3.8-.5-5.7-1-1.5-.4-1.2-.4-2.1-1.7-2.7-3.8-2.9-9.5-3.2-14-.4-5.3-.7-10.6-1.1-15.9-.5-7.7-.9-15.4-1.4-23.2 9.4-.1 18.8-.8 28.1.9C191.9 256.7 194 245.9 187 244.6zM249.5 293.4c-.1 3.4-.3 7.3-3.2 9.4-3.3 2.4-9.3 2.3-13.1 1.5-8.4-1.6-7.6-15.5-8.4-21.7-3.9-29.7-9.3-59.2-11.2-89.1-.5-7.1-11.4-6.2-11 .8 1.2 18.8 3.8 37.5 6.5 56.2 1.3 9 2.7 18.1 3.9 27.1 1 7.5 1.4 15.2 3.3 22.6 3.1 12 13.7 16.4 25.2 15.2 13.2-1.4 18.9-10.3 19.1-22.9C260.6 285.5 249.6 286.4 249.5 293.4zM296.6 287c-.4 4.4 0 8.8 0 13.2 0 4.6-.5 4-4.7 3.2-9.3-1.7-10.8-16.6-12-23.9-5.8-33.2-10.5-66.6-18.6-99.3-1.7-6.9-12.1-3.2-10.4 3.6 4.9 19.8 8.4 39.9 11.7 60 2.8 16.6 4.7 33.7 9.1 49.9 3.2 12 11.9 22 25.3 21 13.4-1 9.7-17 10.5-25.7C308 282.1 297.2 279.9 296.6 287zM375.9 232c-3.8-17.5-10-35-25.6-45.2-6-3.9-13.6-5.7-20.6-4.1-4.8 1.1-8.8 3.8-12 7.3-2.6.4-4.8 2.3-5.7 5.2-1.4 4.4-.6 10.4-.7 14.9-.4 13.8 2 27.5 3.9 41.1 2.4 17.4 5.7 38.2 18.6 51.1 6 6 15.3 8.1 23.3 5.4 8.1-2.7 13.6-10.7 16.9-18.1C382.3 271.3 379.9 251.1 375.9 232zM365.3 281.8c-2.3 6.3-6.5 15-14 16.1-7.9 1.2-13.2-6.3-16.2-12.6-4.1-8.5-6.2-18-7.8-27.2-1.9-11.1-3.4-22.4-4.5-33.5-.5-5.7-.7-11.4-.6-17.2 0-1.7.1-3.3.1-4.9 4.5-8.6 11.9-11.6 21-7 10.2 5.2 15.1 16.2 18.5 26.5 4 12 5.8 24.8 6.6 37.4C369 267.1 368 274.5 365.3 281.8zM429.3 193.1c-.3-6.5-.2-16-4.7-21.2-6.1-7.1-18.6-6.3-24.7.4-1.8 2-1.7 4.4-.6 6.2-1.6.9-2.8 2.6-2.7 4.9.3 26.9 12.7 52 12 79-.1 4.1 3.5 5.5 6.6 4.6.8 2 2.6 3.6 5.3 3.4 3.6-.2 7-1.2 10.4-2.3 2.5-.8 3.7-3.2 3.7-5.6C434.4 239.3 430.3 216.3 429.3 193.1zM419.6 259.5C419.6 259.5 419.5 259.5 419.6 259.5c0-26.2-11.8-50.7-12.1-76.9 0-.8-.2-1.4-.4-2 .4-.3.7-.6 1-.9 1.8-2 5.3-2.1 7.6-1 1.1.5 1.4 3.6 1.6 4.8 1.1 6.2 1.1 12.6 1.2 18.9.1 9.4 2 19 3 28.4 1 9.4 1.8 18.8 2 28.2C422.2 259.2 420.9 259.4 419.6 259.5zM432.5 280.5c-8.1-7.7-20.8.6-25.4 8.1-1.7 2.8-.5 5.3 1.6 6.7-.4 9.9 17.5 14.7 25.3 7.5C440.1 297.1 437.9 285.7 432.5 280.5zM426.4 294.9c-.8.7-.9.5-2 .6-.5 0-.7.1-.7.1 0 0-.2-.1-.7-.1-.3 0-1.7-.4-1.7-.4-.4-.1-.7-.3-1.1-.5.4-1.4.4-2.9-.3-4.2 1.9-1.5 4.1-2.6 5.3-1.7 1.2.9 1.3 3.6 1.4 4.9 0 .2-.2.8-.2 1C426.3 294.9 426.1 295.1 426.4 294.9zM447.5 155.3c-1.1-9.7-15.1-17.4-22.8-21-13.8-6.5-30-4.5-44.6-2.7-18.4 2.2-36.8 4.7-55.3 6.5-6 .6-11.9 1.3-17.9 1.9-5.5.5-11.6.9-16.5 3.7-6.1 3.6 0 12.7 6.2 9.1 3-1.8 8.8-1.7 12.5-2 4.9-.5 9.9-.7 14.8-1.6 7.7-1.4 15.8-1.7 23.7-2.8 8.5-1.1 17-2.2 25.6-3.1 13.5-1.3 29.2-5.3 42.4-.7 4.4 1.5 8.3 3.4 12.1 6 2.2 1.5 4.4 3.3 6.4 5.1.6.5 1.2 1.1 1.7 1.7.4.5.9 1.9.7.7C437.3 163.1 448.3 162.3 447.5 155.3z"/></svg>
</div>
Enter fullscreen mode Exit fullscreen mode

Css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    background: #577b57;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    opacity: 0;
    z-index: -1;
    background: #f36686;
    position: fixed;
    top: 20%;
    bottom: 15%;
    left: 15%;
    right: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-modal {
    position: absolute;
    right: -3rem;
    top: -4rem;
    border: transparent;
    background: transparent;
}

.btn-container {
    border: transparent;
    background: transparent;
}

.btn-container {
    display: inline-block;
}

.btn-container h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .2rem;
    font-weight: bold;
}

.btn-modal:focus,
.btn-container:focus {
    outline: none;
    border-radius: 50%;
    box-shadow: 0 0 0 6px red;
}

.img-btn-modal {
    display: inline-block;
    border: none;
}

.img-modal {
    display: inline-block;
    position: absolute;
    top: 15vh;
    left: 14vw;
}

.modal-is-open .modal-overlay {
    opacity: 1;
    z-index: 1;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript:

const btnContainer  = document.querySelector('.btn-container')
const btnModal = document.querySelector('.btn-modal')

btnContainer.addEventListener('click', _ => {
    document.body.classList.toggle('modal-is-open')
}, false)

btnModal.addEventListener('click', _ => {
    document.body.classList.toggle('modal-is-open')
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)