EXPLORING HTML ELEMENTS:

Miguel Campos — Tue, 05 Nov 2024 18:15:49 +0000

DEMO

Introduction

The dialog element has been widely supported by all browsers for some time now, and I'm here to show you how this element can greatly improve the productivity and quality of your code, regardless of the framework you're using.

I'm using plain JavaScript to demonstrate that you don't need many lines of code to create beautiful and simple components.
Using this element is quite simple:

<main>
  <dialog id="dialog">
     <h1>DIALOG</h1>
  </dialog>
  <button id="dialog button">OPEN DIALOG</button>
</main>

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

dialogButton.addEventListener('click', () => dialog.showModal());

As you can see above, you just need to take the reference of the dialog element and call one of these two functions:

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

But you might be wondering:

What is the difference between these two functions?

Well, to understand that, we have to understand a little about layers and what the top-layer is.

Layers

Let me give you an example of something you may have come across before when using a drawer component. You call the component normally in your html and it ends up not opening on the whole screen, only in the context you placed it, so you end up having to place your drawer in index.html for it to open in the whole viewport or fill your css with position and z-index to create an overlapping context.

By using layers you can make this easier, but you also end up polluting your css document a bit. By using showModal() it opens the dialog element in that top-layer already with a separate context without any configuration required. If you use show() it doesn't call the dialog in that top-layer and you can have the normal behavior of the viewport.

The top layer is a “layer” that expands over the entire viewport and overlays all the layers created by you or your web browser. It helps a lot and avoids the infamous excessive prop drilling.

Okay, okay, but how do I style this element? It must be very difficult!

Not at all! It's as simple as centering a div... Maybe a bit more!

Dialog / Modals

For more in-depth stylization I recommend you to see this video from Kevin Powell.

To style the dialog is simple just put id/class in the element and use CSS.

<main>
  <dialog id="dialog">
     <h1>DIALOG</h1>
  </dialog>
  <button id="dialogButton">OPEN DIALOG</button>
</main>

#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

As you can see above, I used #dialog[open] to modify the positioning of the elements. When you create a dialog it comes by default with the display disabled.

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.

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

Show! Super easy! But how do I close this modal? When I click on the backdrop nothing happens!

Let's go! By default the element doesn't come with this possibility. If you want to close the modal you have to call the function to close it using an internal button or something like that.

dialog.close();

But if you want to replicate this effect of closing by clicking outside, you can use a simple function to identify the edges of the dialog element to know if you've clicked outside or not.

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

The behavior looks like this:

I recommend you to see the Popover API if this is what you want to do constantly.

Man, that's ugly! My library is already animated!

Don't worry about it! Let's add a simple fade-in animation.

#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* nice */
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

#dialog[open],
#dialog[open]::backdrop {
  animation: fadeIn 1s forwards; /* Não se esqueça de colocar fowards*/
  /* omg i now i know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
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:

A new parameter has been added to determine the duration of the animation to close the modal (after some searching I found this video from Kevin Powell).
I added an attribute called closing when the user clicks. It is removed using the time parameter mentioned above.

#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* nice */
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

#dialog[closing]::backdrop {
  background: rgba(0, 0, 255, 90%);
}

#dialog[open],
#dialog[open]::backdrop {
  animation: fadeIn 1s forwards;
  /* omg i now i know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[closing],
#dialog[closing]::backdrop {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

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.

<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.

So to move the element you just need to change the margin.

#drawer {
  margin: 0;
  margin-left: 0;
  margin-right: auto;
}

It's important to note that to set the drawer to the full height of the screen you have to overwrite the dialog's default max-height!

#drawer {
  margin: 0;
  margin-left: 0;
  margin-right: auto;
  height: 100vh;
  max-height: 100vh; /** IMPORTANTE !!!*/
  border: 0;
}

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

/** @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);

#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%);
  }
}

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

Thank you for reading

This is my first post here so thank you for reading and if I've helped in any way I recommend you follow me on linkedin 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.