Modal with calcite-web

546
4
Jump to solution
03-25-2019 07:41 AM
JérômeDuckers
New Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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

View solution in original post

4 Replies
ReneRubalcava
Frequent Contributor II

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
New Contributor III

Thanks for your answer Rene.

0 Kudos
coryeicher
New Contributor III

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

CORY EICHER
www.eichcorp.com
cory@eichcorp.com
FC_Basson
MVP Regular Contributor

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.

 

0 Kudos