Comments on: Lessons Learned from Recreating a Styled Dialog https://frontendmasters.com/blog/lessons-learned-from-recreating-a-styled-dialog/ Helping Your Journey to Senior Developer Mon, 26 May 2025 19:57:11 +0000 hourly 1 https://wordpress.org/?v=6.9 By: Chris Coyier https://frontendmasters.com/blog/lessons-learned-from-recreating-a-styled-dialog/#comment-28768 Mon, 26 May 2025 19:53:08 +0000 https://frontendmasters.com/blog/?p=5578#comment-28768 In reply to Luke Warlow.

Ah. Fixed that here as well as here https://frontendmasters.com/blog/move-modal-in-on-a-shape/

]]> By: Luke Warlow https://frontendmasters.com/blog/lessons-learned-from-recreating-a-styled-dialog/#comment-28650 Sat, 24 May 2025 21:29:04 +0000 https://frontendmasters.com/blog/?p=5578#comment-28650 In reply to Chris Coyier.

Just as an fyi you’ve missed off the popover attribute from the dialog, so the popovertarget fallback doesn’t work.

]]> By: Chris Coyier https://frontendmasters.com/blog/lessons-learned-from-recreating-a-styled-dialog/#comment-25937 Thu, 17 Apr 2025 22:46:27 +0000 https://frontendmasters.com/blog/?p=5578#comment-25937 In reply to Curtis Wilcox.

Huge. Love it. Will update post.

]]> By: Kilian Valkhof https://frontendmasters.com/blog/lessons-learned-from-recreating-a-styled-dialog/#comment-25899 Thu, 17 Apr 2025 08:57:50 +0000 https://frontendmasters.com/blog/?p=5578#comment-25899 I have good news for you, HTML-only opening is coming to dialog! There’s commandfor which contains the id of your dialog, and command which is show-modal to show and close to close again. More here: https://developer.chrome.com/blog/command-and-commandfor

]]> By: Curtis Wilcox https://frontendmasters.com/blog/lessons-learned-from-recreating-a-styled-dialog/#comment-25883 Wed, 16 Apr 2025 23:52:26 +0000 https://frontendmasters.com/blog/?p=5578#comment-25883 “There is no way to show a dialog in the modal state from HTML alone.”

There is and it’s freakin’ awesome!

(Omitting angle brackets because I don’t know what this comment field supports)

button command="show-modal" commandfor="mydialog"

Like popovertarget, commandfor takes the id of the dialog element it’s meant for.

A few declarative command values have been defined, show-modal triggers mydialog.showModal(). It’s expected that more commands will be added to specs in the future but you can also make up your own commands to be handled by JavaScript.

The Invoker Commands API has shipped in Chromium, it’s in Safari Technology Preview, and in Firefox Nightly. I’m hoping that it will ship in all of them (be “Baseline Newly Available”) before 2026.

In the meantime, you can put popovertarget="mydialog" on the same button, command supersedes it in browsers that support it. A dialog element opened by popover won’t be modal but at least it will be open. You can also feature detect support for command (document.createElement('button').commandForElement returns null in browsers that support it, undefined in others) and open the modal dialog using JavaScript.

Same modal dialog with command plus non-modal popover fallback, no JavaScript:

https://codepen.io/ccwilcox/pen/yyyLEzN

https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API

]]>