Modal with calcite-web

[JérômeDuckers]

Hi,

How can I launch a calcite modal directly in javascript ? I want to launch programmatically these modals (Calcite Web | Esri Design Patterns ) as example.

Where can I found documentation about that ?

Thanks,

Jérôme.

[ReneRubalcava · Accepted solution]

The JavaScript section of the docs touches on this.

Scroll down and you can see the options for the Modal events in the tables.

You need to import the event bus and then you can emit the modal event with a modal id to open and close the modals programmatically.

import { bus } from 'calcite-web`;

// Opens a modal specified by data-modal attribute
bus.emit('modal:open', {id: modalId});

// Closes open modal
bus.emit('modal:close');‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[JérômeDuckers]

Thanks for your answer Rene.

[coryeicher]

For anyone coming across this, it looks like the approach has changed. calcite-modal has an "active" property, and I believe this is used to show the modal. 

"calcite-web" is deprecated, at least that's what noted here https://github.com/Esri/calcite-web. That removes the bus referred to in the solution to the original question.

I haven't yet confirmed that the "active" property is the way to go, still working

[FC_Basson]

You're right.  The active property sets the modal visibility (fade in or fade out).

// show modal
document.querySelector('calcite-modal#<modal ID>').active = true;
// hide modal
document.querySelector('calcite-modal#<modal ID>').active = false;

The modal ID is optional, or you can just use the ID as the selector.