DEV Community

Cover image for dialog for creating Modals
Harsh Bharvada
Harsh Bharvada

Posted on

4 1

dialog for creating Modals

Have you ever had trouble creating modals in UI?

Are you asking these questions to yourself:

1) How should I create overlay for the modal?
2) Will the div wrapper be absolute position?
3) Should I use jQuery to open and close the modal?

Has this issue constrained you to use Bootstrap?

All your questions are answered here

So let's spare you of some of this misery!

Alt Text

You can play around here in this pen:

Doesn't it feel magical to overcome all your positioning & overlay issues!
Now let's deep dive!

You can make a dialog with or without overlay but toggling between these two cases is pretty simple.
Without overlay (banners):

dialog.show();
dialog.hide();
Enter fullscreen mode Exit fullscreen mode

With overlay(modals):

dialog.showModal();
dialog.close();
Enter fullscreen mode Exit fullscreen mode

Attributes & customisations

1) open : Dialog has an 'open' attribute to signify if it's open or not.

<dialog>
  I'm closed.
</dialog>

<dialog open>
  I'm open.
</dialog>
Enter fullscreen mode Exit fullscreen mode

You can even add animations while opening. Here is a small one for you where the modal fades in from slight left of final position:

dialog[open] {
  animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8);
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
} 
Enter fullscreen mode Exit fullscreen mode

2) ::backdrop : This pseudo-selector in CSS can be used to customise the overlay of the dialog.

dialog::backdrop {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(54, 54, 54, 0.5));

}

Enter fullscreen mode Exit fullscreen mode

You can even add a blur to this backdrop by adding 'backdrop-filter' CSS property like this:

backdrop-filter: blur(3px);
Enter fullscreen mode Exit fullscreen mode

Browser & Polyfill support

Below is the browser support table from MDN :

Alt Text

Polyfill support Link

Please comment if you have any additions. Would love to lear something new!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
florincornea profile image
Cornea Florin

nice :)

Collapse
 
moyohussein_92 profile image
Hussein AbdulQohar

Nice article, I learnt that browser support for the dialog component is very sketch as such should not be used in production.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay