PricingBlog

How to use <dialog> for a modal?

  • musictrader-1209567011554721853

    musictrader

    1 year ago

    Hello. I’m trying to use as much semantic html as possible. I’ve seen examples of using the HTML native <dialog> component to create a modal. According to mdn, the <dialog> element should not be shown by default, however, any children that I put inside the dialog are showing in the preview window. Is there some default styling that I can disable that’s allowing this?
  • nocode.lad-1210151943700480021

    noCode.Lad

    1 year ago

    Probably set it to display none by default. And based on your conditional, apply a class that changes the display to relative or absolute.
  • lucasg-1210222442123894816

    Lucas G

    1 year ago

    You can still apply the <dialog> tag and just control it with the show/hide conditions.
  • lucasg-1210222732050960465

    Lucas G

    1 year ago

    The show/hide differs from display: none in that the element is actually completely removed from the DOM until its show condition is met
    🤩1
  • I personally like that for a few reasons
  • nocode.lad-1210228351994695832

    noCode.Lad

    1 year ago

    I actually use both, but prefer applying classes if I want to animate the entry or exit of said element.
  • musictrader-1210585536293773384

    musictrader

    1 year ago

    Thanks for the suggestion!