And without JavaScript, the trick is in using a CSS to check for # anchors in the address using the :target selector. It’s quite straightforward and even a standard example at w3schools CSS :target Selector... in fact even gives an example for a tabbed interface which would work with Bulma too!

All you need is:

To show the modal, to click on a link with href pointing to the modal’s ID. This will trigger the CSS #modal:target which sets the modal display style.

And to hide it, to click on a close button with href pointing anywhere else. Unfortunately, using href="#" will scroll to the top of the page, which is not ideal! So, I just use a non-existent link. See CSS-Tricks On :target Fighting the Jump for options.

Modal Dialog Animation

Studying the styles for the slideTop effect, the minimum CSS required is as below. I’m using .modal with a .modal-card rather than .modal-content but either will do. Also, I’m not even bothering to apply any style (i.e. modal-fx-slideTop), but rather, overriding relevant modal styles directly.