Wouldn't it be simpler to use <dialog> with showModal()? You get a ::backdrop for free and don't have to set it up separately.

@dgw
As suggested, I changed it to use the element.

Hello, late into the discussion, sorry !

Currently :

This PR :

I'm all OK with the principle.

Is there any benefit in introducing a new modal.css instead of adding style to an existing CSS file ? Genuine question, I'm a CSS noob, but it seems to me that is another server request for just a few bytes of style. This would also remove the late <link rel="stylesheet" ... while all the others are grouped at the beginning of the file.

Maybe then we could easily expand on this modal window to deal with edits too ?

Thoughts, @dgw & @LeoColomb ?

Maybe then we could easily expand on this modal window to deal with edits too ?

I like that idea. Not to scope-creep this PR, of course, but in the future. Once we have one type of modal set up it makes the next one(s) easier. :)

Thoughts, @dgw & @LeoColomb ?

Agreed that the styles for this should just go in the existing style.css instead of a new file, especially if we're working toward the use of modals in more places as above.

It's not that big of a deal to fetch one extra CSS file with modern HTTP keepalive/pipelining/other fun stuff, and even less of one if caching is set up correctly. I could also see keeping it in a separate file for source clarity—but the <link> should go in the HEAD with other stylesheets in that case.

Thoughts, @dgw & @LeoColomb ?

Can't say better than @dgw, everything is said. 👍

Late concern : how does this play with accessibility ?

For example, could @lilmike test this PR and report ?

@ozh I tested this pr, it works fine for my screen reader. The dialogue hides the main portion of the page so I can only see the dialogue, which is a good thing, to be clear. The number of dialogues I see on websites that silently open up at the bottom of a page and I have no idea they're there until I start to wonder why clicking a button didn't do anything lol. Great job @infinitail

Thanks a lot for reporting @lilmike

Tweaks and improvements : more semantically correct HTML, better handling of JS events, handle long titles and URLs, no new CSS file.
Styling looks a bit better to me:

Unless someone has a new idea to express, this is good to go for me