Modal

The nxt-modal stops the interaction with the main window by opening a new child window in front of it. This prevents any interaction with the main window in the background. Users must interact with the modal window before they can return to the main window.

Basic

Trigger This is a basic modal Trigger by click

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  This is a basic modal
</nxt-modal>
Trigger by click

Triggers

It is possible to open the Modal by placing a element like a button within the trigger slot or by controlling the show property programmatically.

Slot

The Modal gets shown after clicking on the element within the trigger slot.

Trigger

This is a basic modal

Trigger by click

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  <p class="nxt-text">This is a basic modal</p>
</nxt-modal>
Trigger by click

Manual

The Modal gets shown after programmatically changing the show property.

This is a basic modal.

Trigger Trigger manual

<nxt-modal id="manualExample">
  <p class="nxt-text">This is a basic modal.</p>
</nxt-modal>
<nxt-button appearance="small">Trigger</nxt-button>
Trigger manual

<script>
  const manualModal = document.querySelector('#manualExample');
  const manualModalTrigger = document.querySelector('#manualExample + nxt-button');

  const toggleFunction = function () {
    manualModal.show = !manualModal.show;
  };

  manualModalTrigger.addEventListener('click', toggleFunction);
</script>

Modal with a lot of content

In case there is a lot of content to show within the modal, the content will shown as scrollable.

Trigger

This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.

Trigger by click

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
</nxt-modal>
Trigger by click

Modal Header

The modal headline is part of the default content flow. There is a expert as well as a retail version available. In Addition, there is a header slot available to position the headline sticky.

Slot

By using the headerslot, the headline gets placed sticky on top of everything.

Trigger

This is a headline

Trigger by click

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>

  <h2 slot="header" class="nxt-headline medium regular">This is a headline</h2>

  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
  <p class="nxt-text">
    This is a basic modal with extra long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare
    massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus
    proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit
    amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In
    fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi
    blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis
    egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.
  </p>
</nxt-modal>
Trigger by click

Without Icon (Expert)

The expert headline is left aligned and without an icon.

Trigger

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu cursus euismod quis.

Trigger manual

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>

  <h2 class="nxt-headline medium regular">This is a headline</h2>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>
</nxt-modal>
Trigger manual

With Icon (Expert)

The expert headline is left aligned and can show an icon.

Trigger

This is a headline

Trigger manual

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>

  <h2 class="nxt-headline medium regular">
    <nxt-icon class="nxt-margin-right-s" name="exclamation-triangle" size="medium" style="color: #DC3149;"></nxt-icon
    >This is a headline
  </h2>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>
</nxt-modal>
Trigger manual

Without Icon (Retail)

The retail headline is centered.

Trigger

This is a headline

Trigger manual

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>

  <h2 class="nxt-headline medium" style="flex-direction: column;">This is a headline</h2>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>
</nxt-modal>
Trigger manual

With Icon (Retail)

The retail headline is centered and can show an icon on the first of two lines.

Trigger

This is a headline

Trigger manual

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>

  <h2 class="nxt-headline medium" style="flex-direction: column;">
    <nxt-icon class="nxt-margin-bottom-s" name="exclamation-triangle" size="large" style="color: #DC3149;"></nxt-icon
    >This is a headline
  </h2>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>
</nxt-modal>
Trigger manual

Modal Actions

It is possible to use buttons to control the behaviour of the modal. In case the content is long enought so that is must get scrolled, a line appears above the footer section.

Trigger

This is a headline

Cancel

Proceed

Trigger manual

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  <h2 class="nxt-headline medium">This is a headline</h2>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>

  <p class="nxt-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Dui vivamus arcu felis bibendum
    ut. Et ultrices neque ornare aenean euismod elementum. Lectus proin nibh nisl condimentum id venenatis a
    condimentum. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sit amet venenatis urna cursus eget. Penatibus et
    magnis dis parturient montes nascetur ridiculus mus mauris. In fermentum posuere urna nec. Dolor magna eget est
    lorem ipsum dolor sit. Massa id neque aliquam vestibulum morbi blandit. Quam lacus suspendisse faucibus interdum
    posuere lorem ipsum dolor. Et netus et malesuada fames ac turpis egestas integer eget. Quisque egestas diam in arcu
    cursus euismod quis.
  </p>

  <div slot="footer">
    <nxt-button class="nxt-margin-bottom-0 nxt-margin-right-s" appearance="secondary">Cancel</nxt-button>
    <nxt-button class="nxt-margin-bottom-0">Proceed</nxt-button>
  </div>
</nxt-modal>
Trigger manual

Closing

You can disable the default feature that a Modal is getting closed by clicking outside of it by using the attribute stayopen as shown in the example below. There is also the option to use the close button within the right top corner of the modal or by pressing the ESC key.

On document click

By default, the modal gets closed when the user clicks outside of the modal.

Trigger

This is a headline

Closable by clicking outside

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  <h2 slot="header" class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <p class="nxt-text">Closable by clicking outside</p>
</nxt-modal>
Closable by clicking outside

Stay open on document click

By using the attribute stayopen, the modal does not get closed when the user clicks outside of the modal or presses the ESC button.

Stayopen

This is a headline

Not closable by clicking outside

<nxt-modal stayopen>
  <nxt-button slot="trigger" appearance="small">Stayopen</nxt-button>
  <h2 slot="header" class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <p class="nxt-text">Not closable by clicking outside</p>
</nxt-modal>
Not closable by clicking outside

No close icon

You can disable the close icon that is shown within the Modal. By using the attribute noCloseIcon, the icon is not available.

Trigger

This is a headline

Shows no close icon (click outside to close the Modal)

<nxt-modal noCloseIcon>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  <h2 slot="header" class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <p class="nxt-text">Shows no close icon (click outside to close the Modal)</p>
</nxt-modal>
Shows no close icon (click outside to close the Modal)

No close icon and stay open

In case you use this attribute in combination with the attributes stayopen the Modal will stay open and you have no possibility to close it, in this case you need to provide a programmatical solution to close the Modal.

Trigger

This is a headline

Press the ESC button or wait 5 seconds

Closed after 5 seconds

<nxt-modal noCloseIcon stayopen>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  <h2 slot="header" class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <p class="nxt-text">Press the ESC button or wait 5 seconds</p>
</nxt-modal>
Closed after 5 seconds

<script>
  const noCloseIcon = document.querySelector('nxt-modal[noCloseIcon][stayopen]');

  const startTimer = function () {
    setTimeout(() => {
      noCloseIcon.show = false;
    }, 5000);
  };

  noCloseIcon.addEventListener('click', startTimer);
</script>

Custom width

It is possible to set the width of the modal.

Content

This is a headline

<nxt-modal width="300px">
  <nxt-button slot="trigger" appearance="small">Content</nxt-button>
  <h2 slot="header" class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <img width="116" height="30" src="/assets/images/allianz.svg" alt="allianz logo" />
</nxt-modal>

Focus handling

The modal stores the element that was in focus before opening. After closing the modal the focus is set again to this element. While the modal is shown, the first focusable element gets the focus as long as there is such an element found. In case the user is navigating via keyboard, the focus stayes within the modal as long as it is shown.

Content

This is a headline

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Content</nxt-button>
  <h2 class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <input name="first" placeholder="first focusable element" /><br />
  <input name="first" placeholder="first focusable element" /><br />
  <button>Last focusable element</button>
</nxt-modal>

Custom content

It is possible to use every kind of html content within the Modal.

Content

This is a headline

<nxt-modal>
  <nxt-button slot="trigger" appearance="small">Content</nxt-button>
  <h2 class="nxt-headline medium nxt-margin-bottom-3m">This is a headline</h2>
  <img width="116" height="30" src="/assets/images/allianz.svg" alt="allianz logo" />
</nxt-modal>

import '@nxt/ndbx-components/modal';

NxtModal

Tag: nxt-modal

Properties

Property	Attribute	Type	Default	Description
`ariaLabelCloseIcon`	`ariaLabelCloseIcon`	`string`	`'Close Modal'`	Accessible close icon label.
`modalInitialVisible`	`modalInitialVisible`	`boolean`	`false`	Whether the modal will be opened automatically.
`noCloseIcon`	`noCloseIcon`	`boolean`	`false`	Whether to show a close button. By default a close icon is shown.
`stayopen`	`stayopen`	`boolean`	`false`	Whether the modal should be closed on click outside of the modal or by clicking the ESC key.
`width`	`width`	`string`	`'736px'`	Sets the width of the modal. By default the width is 736px.
`show`	`show`	`boolean`