DEV Community

Cover image for Modal_002
GiandoDev
GiandoDev

Posted on

1 1

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️