topic Re: Modal with calcite-web in ArcGIS JavaScript Maps SDK Questions

Modal with calcite-web

JérômeDuckers — Mon, 25 Mar 2019 14:41:22 GMT

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.

Re: Modal with calcite-web

ReneRubalcava — Sat, 11 Dec 2021 23:13:06 GMT

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');‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Modal with calcite-web

JérômeDuckers — Mon, 25 Mar 2019 20:55:27 GMT

Thanks for your answer Rene.

Re: Modal with calcite-web

coryeicher — Thu, 28 Apr 2022 20:15:05 GMT

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

Re: Modal with calcite-web

FC_Basson — Thu, 05 May 2022 06:59:08 GMT

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.