Back to guidelines

Web ComponentThe latest version of this package is: 0.3.4, Opens in new window

Webcomponent for Modal

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-wc/modal@0.3.4

Table of Contents

Usage

Markup

<ids-modal data-title="Title">
  <p class="if">
    Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates
    don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God
    creates Man. Man destroys God. Man creates Dinosaurs. What do they got in
    there? King Kong? Forget the fat lady! You're obsessed with the fat lady!
    Drive us out of here!
  </p>
</ids-modal>
<script src="…modal-webcomponent.iife.js"></script>

Or:

<ids-modal
  data-title="Title"
  data-text="Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. What do they got in there? King Kong? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!"
  data-id="modal-test"
  data-is-open="true"
  data-description="A modal with quotes from characters played by Jeff Goldblum"
>
</ids-modal>
<script src="…modal-webcomponent.iife.js"></script>

Open on init

If you want the modal to open on init without an external indicator, you can pass the data-is-open="true" attribute. This will open up the modal on init.

Properties

Property Type Description Required
data-text String Use this attribute if you only want to use text No
data-title String Modal title Yes
data-id String The id of the modal Yes
data-is-open String/Boolean Should this modal open on render? No
data-description String If you want to use aria-describedby, add description here No

Events

The webcomponent fires a CustomEvent for opening and closing of the component.

The webcomponent also listenes to a CustomEvent for toggling of the modal.

Toggle

This event is ment to be fired of the initiator element for the modal. It is implemented by the developer to be able to display the modal.

See implementation example below.

The data-id attribute on the webcomponent needs to be set for this.

<button type="button" class="if primary button" id="open">Open modal</button>
<ids-modal data-title="Title" data-id="modal-test">
  <p class="if text body">
    Your card validation code (CVC) is an extra security feature — it is the
    last 3 or 4 numbers on the back of your card.
  </p>
  <a href="#" class="if">This is a link</a>
</ids-modal>
<script>
  const _dispatchEvent = (id) => {
    const _event = new CustomEvent(`ids:send:modal:toggle:${id}`, {
      bubbles: !0,
      detail: {
        source: 'IDS_MODAL',
        type: 'MODAL_TOGGLE',
        payload: {
          id: id,
        },
      },
    });
    document.dispatchEvent(_event);
  };

  document.getElementById('open').addEventListener('click', (e) => {
    _dispatchEvent('modal-test');
  });
</script>

And the component will listen to this event:

document.addEventListener(`ids:send:modal:toggle:${_id}`, (e) => {
  this.externalInitiatorEl = e.target;
  this.toggle();
});

Open/Close

document.addEventListener(`ids:send:dialog:${_id}`, (e) => {
  console.log(e);
});
Event Type Description
ids:send:modal:<id> CustomEvent Event fired on open and close
ids:send:modal:toggle:<id> CustomEvent Event fired on toggling of modal

The payload of the event looks something like this:

// For opened event
detail: { source: "IDS_MODAL", type: "MODAL_OPENED", payload: { id: "<id>" } }
// For closed event
detail: { source: "IDS_MODAL", type: "MODAL_CLOSED", payload: { id: "<id>" } }
Contact us, Opens in new window