What is the <dialog> element and how can I use it to create modals, dialogs and drawers?

DEMO

Introduction

For more in-depth stylization I recommend you to see this

This attribute is only added when you call one of the two functions.

So when styling any dialog element, always try to use the name of your class/id and the attribute to avoid display problems.

And as you can see above, the dialog already comes with a ::backdrop effect and it's also very simple to modify it.

I recommend you to see the

Adding the fade-out animation is a little more difficult because you don't have a way of identifying when the user is going to close the modal, so we'll have to make a change to our script file.

/** @type {HTMLDialogElement} */

const dialog = document.getElementById('dialog');

/** @type {HTMLButtonElement} */

const dialogButton = document.getElementById('dialogButton');



/**

 * Adiciona um eventListener para fechar o dialog

 * @param {HTMLDialogElement} dialogRef - A referencia ao Dialog.

 * @param {number|undefined} closingAnimationDuration - Tempo de duração 

 * para acabar 

 * a animação de fechar em minisegundos.

 * @example

 * const dialog = document.querySelector('#dialog');

 * closeDialogClickingOutside(dialog, 500)

 */

const closeByClickingOutside = (dialogRef, closingAnimationDuration = 0) => {

  dialogRef.addEventListener('click', (ev) => {

    if (

      ev.offsetX < 0 ||

      ev.offsetX > ev.target.offsetWidth ||

      ev.offsetY < 0 ||

      ev.offsetY > ev.target.offsetHeight

    ) {

      dialogRef.setAttribute('closing', '');

      setTimeout(() => {

        dialogRef.close();

        dialogRef.removeAttribute('closing');

      }, closingAnimationDuration);

    }

  });

};



closeByClickingOutside(dialog, 500);

Two significant things have been done:

1. A new parameter has been added to determine the duration of the animation to close the modal (after some searching I found this

   
   
   

   And there we have our fully animated dialog without any libraries!

   
   
   

   That nice! But how did you make a drawer using this element?

   
   
   

   Well, to achieve this we have to take the default styles of the dialog element and overwrite them...

   
   
   

   
   
   
   Drawer
   

   
   
   

   The drawer opens above the screen at full height. So let's make a new drawer element from scratch.
   
   

   
   
   
   
   

   CODE Kopieren

   <dialog id="drawer">
   
     <h1>DRAWER</h1>
   
   </dialog>
   
   <button id="drawerButton">OPEN DRAWER</button>
   
   

   
   
   
   
   
   
   
   

   It's important to know that the dialog is centered using the margin and not the flexbox.

   
   
   
   
   

   Now it's simple: just add the animations using the same function you created in the step-by-step dialog and you're done!
   
   

   
   
   
   
   

   CODE Kopieren

   /** @type {HTMLDialogElement} */
   
   const drawer = document.getElementById('drawer');
   
   /** @type {HTMLButtonElement} */
   
   const drawerButton = document.getElementById('drawerButton');
   
   
   
   drawerButton.addEventListener('click', () => drawer.showModal());
   
   
   
   /**
   
    * Add eventListener to close dialog clicking on outerbox
   
    * @param {HTMLDialogElement} dialogRef - The DialogReference.
   
    * @param {number|undefined} closingAnimationDuration - Time for closingAnimation duration in miliseconds
   
    * @example
   
    * const dialog = document.querySelector('#dialog');
   
    * closeDialogClickingOutside(dialog, 500)
   
    */
   
   const closeByClickingOutside = (dialogRef, closingAnimationDuration = 0) => {
   
     dialogRef.addEventListener('click', (ev) => {
   
       if (
   
         ev.offsetX < 0 ||
   
         ev.offsetX > ev.target.offsetWidth ||
   
         ev.offsetY < 0 ||
   
         ev.offsetY > ev.target.offsetHeight
   
       ) {
   
         dialogRef.setAttribute('closing', '');
   
         setTimeout(() => {
   
           dialogRef.close();
   
           dialogRef.removeAttribute('closing');
   
         }, closingAnimationDuration);
   
       }
   
     });
   
   };
   
   
   
   closeByClickingOutside(drawer, 500);
   
   

   
   
   
   
   
   
   
   
   
   
   
   

   CODE Kopieren

   #drawer {
   
     margin: 0;
   
     margin-left: 0;
   
     margin-right: auto;
   
     height: 100vh;
   
     max-height: 100vh;
   
   }
   
   
   
   #drawer[open] {
   
     animation: openDrawer 0.5s forwards;
   
   }
   
   
   
   #drawer[closing] {
   
     animation: closingDrawer linear 0.5s forwards;
   
   }
   
   
   
   @keyframes openDrawer {
   
     from {
   
       transform: translateX(-100%);
   
     }
   
     to {
   
       transform: translateX(0);
   
     }
   
   }
   
   
   
   @keyframes closingDrawer {
   
     from {
   
       transform: translateX(0);
   
     }
   
     to {
   
       transform: translateX(-100%);
   
     }
   
   }
   
   

   
   
   
   
   
   
   
   
   
   
   
   

   CODE Kopieren

   <dialog id="drawer">
   
       <h1>DRAWER</h1>
   
   </dialog>
   
   <button id="drawerButton">OPEN DRAWER</button>
   
   

   
   
   
   
   
   
   
   

   my first language is Portuguese so most of my posts are in Portuguese but I am trying to post something in English too. I intend to post similar things from now on, if you have any recommendations on how to improve this modal and drawer strategy you can send them to me there.

   Vollständiger Original-Bericht

   Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

   ↗ Original-Artikel auf dev.to lesen