<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>

<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>

<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>

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

document.addEventListener(`ids:send:dialog:${_id}`, (e) => {
  console.log(e);
});

// 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>" } }