Modal

cds-modal

The Modal component is used to display content in a layer above the main application, often for user interactions like forms, alerts, or confirmations. It provides a way to focus user attention on a specific task without navigating away from the current page.

Default

• Size: --medium
• Position: --center

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

<dialog id="modalId" class="cds-modal">
  <div class="cds-modal__header">
    <span class="cds-modal__title">Modal title</span>
    <button class="cds-modal__close"></button>
  </div>
  <div class="cds-modal__content"><!--Content--></div>
  <div class="cds-modal__footer"><!--Footer--></div>
</dialog>

---

Elements

Element	Code	Parent	HTML tag	Required
Header	cds-modal__header	Block: cds-modal	<div>	optional
└─ Title	cds-modal__title	Element: cds-modal__header	<span>	required
└─ Close	cds-modal__close	Element: cds-modal__header	<button>	optional
Content	cds-modal__content	Block: cds-modal	<div>	required
Footer	cds-modal__footer	Block: cds-modal	<div>	optional

---

Modifiers

Modifier	Options
Size	--small, --medium, --large
Position	--center, --left, --right

Size

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

<dialog id="modalId" class="cds-modal cds-modal--small">
  <!-- Content -->
</dialog>

Position

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

Sample Modal

This is a sample modal to demonstrate how you can use the modal component for user settings. Here, users can customize their preferences, update their profile, or change account settings. Remember, this is just placeholder content, and you should replace it with the actual options and fields when integrating this component into your application.

<dialog id="modalId" class="cds-modal cds-modal--left">
  <!-- Content -->
</dialog>

---

JS Sample code

onClick = "showModal('modalId', true)"

JS sample code

function showModal(dialogId, closeOnClickOutside = false) {
  const dialog = document.getElementById(dialogId);
  dialog.showModal();

  if (closeOnClickOutside) {
    dialog.addEventListener("click", (event) => {
      const rect = dialog.getBoundingClientRect();
      const isClickInside =
        event.clientX >= rect.left &&
        event.clientX <= rect.right &&
        event.clientY >= rect.top &&
        event.clientY <= rect.bottom;

      if (!isClickInside) {
        dialog.close();
        event.stopPropagation();
      }
    });
  }
}