Opening the modal programatically

[PhilipAnd]

Hi,

Is there a way to open the modal programmatically? I am building some keybinding functionality which should open an overlay, but I can't seem to see if there is a way to do it programmatically.

[excid3]

Hey @PhilipAnd! You absolutely can. The best way is to setup a listener and have your keybinding fire an event on the modal element.

Should be something like this:

<data-controller="modal" data-action="open->modal#open">

let event = new CustomEvent("open")
document.querySelector("[data-controller='modal']").dispatchEvent(event)

[PhilipAnd]

Thanks that worked @excid3. I just had to change dispatch to dispatchEventin your example. I do run in to another issue. Before writing here what I did was creating a hidden link and just run the click event on it (yes not pretty), but the issue I ran into, which I also get here is that the black/grey background of the modal is above the actual modal window:

<div id="modal-background" class="fixed top-0 left-0 w-full h-full" style="background-color: rgba(0, 0, 0, 0.8); z-index: 9998;"></div>

The z-index is simply too high compared to the overlay (see https://codepen.io/philipanderse/pen/mdmzvML).

If I test by remove the hidden from the modal (as shown above), the backdrop is shown behind the modal as expected. This error doesn't occur if I create a link and just click on it to open the overlay, so I wonder if there is some sort of bug here (or maybe just an error 40)?