[Feature Request] dialog (modal)

[amkige]

<dialog> is an official HTML element. Mayber use aria-modal to indicate it's a modal.

Some other classless libraries has this like Water.css.

[lucaslarroche]

Yes I agree. There is an HTML tag and it's an essential component. Pico must have a dialog / modal component.

But I wanted Pico to stay focused on CSS. I didn't want Pico to have JavaScript functions.

Do you think this is still useful if Pico is just styling <dialog>, without the JavaScript functions? Of course, the documentation could give examples for dialog.open() and dialog.close().

[amkige]

Yeah, you can just mention the Dialog API in the docs.

However, unfortunately I just noticed that Firefox and Safari don't support this API; Therefore, the basic modal styles and ::backdrop pseudo element. There is a polyfill but I don't know if it's worth it.

[stepbeekio]

Do you think this is still useful if Pico is just styling

, without the JavaScript functions?

I would personally prefer this. In response to @SamyzKhalil's comment about firefox and safari not supporting this API: if picocss reacts in response to the open html attribute then can we document that the developer must toggle this attribute without reference to the experimental API initially?

It strikes me that element.show() is syntactic sugar for element.setAttribute("open", "true").

[lucaslarroche]

@stepbeekio, thank you for your helpful comment. I will probably do that: style the dialog component, then give a JS example in docs. (With element.setAttribute("open", "true");)

[syntropia]

I recently discovered a somewhat "hacky" solution to show/hide dialogs without JS, in the CirruUI CSS framework: https://cirrus-ui.netlify.app/#components

As far as I understand, to open the dialog we use a link targeting the id of the modal as an anchor: <a href="#my-modal">...</a>

The dialog uses the :target pseudo-class to make the dialog appear, something like:

.modal { display: none; }
.modal:target { display: flex; }

Then to close the dialog, we just need to provide a link to a non-existing anchor: <a href="#fictious-anchor">...</a>.

I like how this approach is a no-JS one, very convenient for simple modals like lightboxes. It could probably be combined with the <dialog> tag, solving the poor support of the Dialog API.

Note that a drawback of this method is that opening/closing the dialog stacks locations in browser history. We can work around this by adding a bit of inline JS to replace the location:

<a href="#mobile-menu" onclick="self.location.replace('#mobile-menu')">Menu</a>
<a href="#close-menu" onclick="self.location.replace('#close-menu')">Close</a>

Users with JS enabled would have their history stack preserved, while users with JS disabled will still be able to open/close the dialogs :+1:

[ghost]

I greatly appreciate this news. but i think you need to add the header in the modal. because we can have a modal with a header, an article and a footer, also think about the use of forms in the modal

[lucaslarroche]

@NoxizCode still work in progress 🙂

[lucaslarroche]

Preview is here: https://picocss.github.io/pico/docs/modal.html

Any thoughts? I will probably release this feature next week.

[MoaufmKlo]

The modal looks great! When opening and closing it, it stutters; I have a fairly new device and everything runs well. Is this just me?

[lucaslarroche]

@MoaufmKlo, can you give some specifics? At least your browser version? And a video screenshot if you can?

[MoaufmKlo]

Firefox is on 94.0.1 (64-Bit), Surface Book 3: “Intel Core i7-1065G7 @ 1.30GHz”, 32 GB RAM, “Intel Iris Plus Graphics” and “NVIDIA GeForce GTX 1660 Ti with Max-Q Design”. Animations such as the Bootstrap modal opening/closing work fine.

https://user-images.githubusercontent.com/45636897/141612101-2b361c80-fa33-4fe8-b8e6-3a7864ac7152.mp4

[lucaslarroche]

Thank you, @MoaufmKlo. That helps a lot. It's not a bug, but the rendering is slow because of the blurred background. As Pico should be minimal and neutral, I removed the blur effect. I also handled the scrollbar width to remove any viewport resize. It should be way better: https://picocss.github.io/pico/docs/modal.html