Skip to main content
4.0.8Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 4.0.8

Modal

Modals are popup windows that display over other content in the UI. They are often opened by clicking a button, or by some other user action. Being somewhat intrusive, modals are useful for focusing the user's attention on a specific choice, or on some information displayed in the modal. A common example of use is when asking the user "Are you sure you want to continue?" The TritonModal ships with two configurable default buttons, the [OK] and the [Close] button.

Basic Usage

<triton-modal></triton-modal>
<TritonModal></TritonModal>
<html> 
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-modal></triton-modal>
</body>
</html>

Angular

Use two-way binding for the open property in your angular application with [(open)]="variable"

Behavior

Open On Click

By setting the open property on the modal, you can trigger the modal to open when the user clicks a button. Note that the header slot is used to set the header of the modal.

This is the header on the modal

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic error itaque, nihil blanditiis autem nostrum laboriosam eum, id suscipit eveniet placeat dolorem! Omnis dolor, laborum voluptatem minus labore vero eveniet officiis vel perspiciatis, eius dicta. Enim, natus delectus explicabo architecto odio porro officia unde debitis earum fuga perferendis ex dolores cum alias tempora, ratione labore nostrum repellendus recusandae dolor placeat iure consequatur commodi. Dolorem itaque doloribus soluta minus architecto quisquam, cum assumenda quia totam ducimus delectus dolore molestias neque, cupiditate iusto ratione in eligendi voluptate quas beatae. Maiores sed similique, necessitatibus sint eveniet vitae nam amet iusto minima illo itaque.

Open a modal
<triton-modal open="false">  
<header slot="header">This is the header on the modal</header>
<p>Lorem ipsum...</p>
</triton-modal>
<triton-button onClick="() => (open = true)">Open a modal</triton-button>

Appearance

Custom Height/Width

Triton-Modal can recive a custom height and/or width. If a number is passed, the width will be set in px. You can also pass a CSS string, the width property in CSS will be given as the string specifies (note that only valid CSS can be passed)

This is the header on the modal

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic error itaque, nihil blanditiis autem nostrum laboriosam eum, id suscipit eveniet placeat dolorem! Omnis dolor, laborum voluptatem minus labore vero eveniet officiis vel perspiciatis, eius dicta. Enim, natus delectus explicabo architecto odio porro officia unde debitis earum fuga perferendis ex dolores cum alias tempora, ratione labore nostrum repellendus recusandae dolor placeat iure consequatur commodi.

Open a modal
<triton-modal height="80vh" width="300">
<header slot="header">This is the header on the modal</header>
<p>Lorem ipsum...</p>
</triton-modal>

Button Properties

The modal also has two buttons, which can be configured using the modal properties. Both buttons dismiss the modal when clicked. The Ok-button is used for confirmation, clicking it signifies that the user continues, agrees or accepts. The close-button will close the modal and revert any changes the user might have made while it was open. These buttons can be customized further with the properties ok-text, ok-disabled, ok-skin and so on.

This is the header on the modal

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic error itaque, nihil blanditiis autem nostrum laboriosam eum, id suscipit eveniet placeat dolorem! Omnis dolor, laborum voluptatem minus labore vero eveniet officiis vel perspiciatis, eius dicta. Enim, natus delectus explicabo architecto odio porro officia unde debitis earum fuga perferendis ex dolores cum alias tempora, ratione labore nostrum repellendus recusandae dolor placeat iure consequatur commodi.

Open a modal
<triton-modal ok-text="Custom Ok text" close-text="Custom Close text">
<header slot="header">This is the header on the modal</header>
<p>Lorem ipsum...</p>
</triton-modal>

Background

Modals display with a blurred background by default, however this can be configured using the overlay property.

No background overlay modal

The background should be quite visible in this case, despite the fact that a modal is open. This has been achived by use of the elegant overlay property.

Open a modal
<triton-modal overlay="false">
<header slot="header">No background overlay modal</header>
<p>The background should...</p>
</triton-modal>

Playground

API

Properties

PropertyDescriptionTypeDefault
close-buttonIf true outlined button will show in the footerbooleantrue
close-disabledIf true the close-button will be disabled for user interaction,thus preventing the user from canceling the modalbooleanfalse
close-iconAn icon that is rendered on the close-buttonIcon-
close-skinThe skin of the close-buttonalarm critical flat information neutral primary secondary success warning'secondary'
close-textThe text to display on the close-button that cancels the modalstring'Cancel'
exit-buttonIf true a button with X to close the modal will show in the header on the right sidebooleanfalse
fit-contentIf true the modal window will use the minimal space required to render the content. false the modal will use the value from width and heightbooleantrue
gapThe general spacing between modal specific items in the modalbase body large medium small tiny xlarge xxlarge xxxlarge'base'
heightIf a number is passed, the height will be set in px.You can also pass a CSS string, the height property in CSS will be givenas the string specifies note that only valid CSS can be passednumber string30rem
titleThe title which renders at the top of the modalstring-
ok-buttonIf true success button will show in the footerbooleantrue
ok-disabledIf true the ok-button will be disabled for user interaction,thus preventing the user from confirming the modalbooleanfalse
ok-iconThe icon which will be displayed on the ok-button which confirms the modalIcon-
ok-skinThe skin of the ok-buttonalarm critical flat information neutral primary secondary success warning'primary'
ok-textThe text which displays on the ok-buttonstring'OK'
openIf true the modal is open, and visible on screenSetting this to false will trigger the close eventClicking this button will return the modal to the state it was in, before it was openedbooleanfalse
overlayTo show the background overlay or notbooleantrue
overlay-closableTo allow a click event on the overlay to disableclose the modalbooleantrue
widthIf a number is passed, the width will be set in px.You can also pass a CSS string, the width property in CSS will be givenas the string specifies note that only valid CSS can be passednumber string40rem
z-indexThe CSS z-index at which the modal rendersnumber1000

Events

NameTypeDescriptionExtra
afterCloseCustomEvent<void>Emitted after modal has closed-
afterOpenCustomEvent<void>Emitted after modal has opened-
atChangeCustomEvent<boolean>Emit the state of the open prop, on change-
atCloseCustomEvent<MouseEvent>Emitted when close btn is clicked-
atOkCustomEvent<MouseEvent>Emitted when OK btn is clicked-

Methods

FunctionDescriptionParamsExtra
triggerCloseUse the property open to trigger the Close button. Trigger click on close-button() => Promise<void>deprecated
triggerOkUse the property open to trigger the OK button. Trigger click on ok-button() => Promise<void>deprecated

Slots

Main

Takes any dom element and render it inside the modal

<triton-modal>
<div></div>
</triton-modal>

Items will be placed alongside the [OK] and/or [Close] button. Any element is acceptable, but recommended to only use triton buttons

<triton-modal>
<div slot="footer"></div>
</triton-modal>

Any element, but recommended typical header elements.

<triton-modal>
<div slot="header"></div>
</triton-modal>

Details

Depends on