Place the modal at the bottom of the document to help make sure it shows up on top of everything else.
In order to open it, either set the open attribute to true, or have the user click an element with the attribute data-modal-target="#modalID" where #modalID is the id you give the modal. You can also use data-modal-actions="show|hide|toggle" to set what clicking the element will do to
the modal.
It is also possible to call the show, hide, or toggle methods on dk-modal to control it's state.
Show/Hide
By default a modal has its display set to none. To manually trigger a modal you can use the following JS helpers. If you don't use the provided modal helper you have to manually add a site mask behind the modal or use the site mask utility.
Using Methods
const modalElm = document.querySelector("#modalSelector");
modalElm.toggle();
modalElm.show();
modalElm.hide();
Setting the open attribute
const modalElm = document.querySelector("#modalSelector");
modalElm.open = true;
modalElm.open = false;
Auto Modal Triggers
Show, Hide, Toggle
The example modals are making use of the auto modal trigger provided by the global script. To set up the auto modal add data-modal-target=#modalID to any element. When that element is clicked it will open the modal.
Optionally you can also add data-modal-action='show|hide|toggle' to that same element to set what action you want that element to perform on the modal.
Auto Hide
Inside of the modal on any element you can add data-modal-dismiss. When that element is clicked it will close the modal.
Slots
To make use of a slot, add the slot="NAME" to any kind of element that you want inserted into the slot of the web component. A slot allows you to control the markup and styling of what content you put into it.
<div slot="slot-name">Additional Markup</div>
| Slot | Description |
|---|---|
content | An optional slot for the content of the modal. |
footer | Slot for markup containing buttons in the footer of the modal. |
title | Slot for putting custom markup in the title. |
Properties
Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dismissText | dismiss-text | Use to customize the close message of a modal when you are use of the footer slot. | string | "Close" |
isOpen | open | Whether the modal is open | boolean | false |
modalTitle | title | Sets a string title for the modal. | string | |
noDefaultFooter | no-footer | Set to true to hide the default close btn | boolean | false |
size | size | Sets the max width of the modal | "lg" | "md" | "sm" | "xl" | "md" |
Events
| Event | Description | Type |
|---|---|---|
dkUserDismiss | any |
Simple Modal
<dk-button
data-modal-target="#simplemodal"
data-modal-action="toggle">
Simple Modal
</dk-button>
<dk-modal
title="Simple Modal"
id="simplemodal">
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Laborum repellat
quae nam! Totam impedit modi, iure
voluptas numquam minima debitis.
</p>
</dk-modal>Custom Dismiss Text
<dk-button
data-modal-target="#customdismisstext"
data-modal-action="toggle">
Simple Modal with Dismiss Text
</dk-button>
<dk-modal
title="Simple Modal with Dismiss Text"
id="customdismisstext"
dismiss-text="CTA">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Id in tempora labore
autem repudiandae distinctio, optio
eveniet minima dolores doloremque! Lorem
ipsum dolor, sit
</dk-modal>Modal Sizes
<dk-button
data-modal-target="#small"
data-modal-action="toggle">
Simple Modal small
</dk-button>
<dk-modal
size="sm"
title="Simple Small Modal"
id="small">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Id in tempora labore
autem repudiandae distinctio, optio
eveniet minima dolores doloremque! Lorem
ipsum dolor, sit
</dk-modal>
<dk-button
data-modal-target="#medium"
data-modal-action="toggle">
Simple Modal Medium
</dk-button>
<dk-modal
size="md"
title="Simple Medium Modal"
id="medium">
<p>
Medium is the default size. You
don't need to add a size prop for
a medium modal.
</p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Id in tempora labore
autem repudiandae distinctio, optio
eveniet minima dolores doloremque! Lorem
ipsum dolor, sit
</dk-modal>
<dk-button
data-modal-target="#large"
data-modal-action="toggle">
Simple Modal Large
</dk-button>
<dk-modal
size="lg"
title="Simple Large Modal"
id="large">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Id in tempora labore
autem repudiandae distinctio, optio
eveniet minima dolores doloremque! Lorem
ipsum dolor, sit
</dk-modal>
<dk-button
data-modal-target="#xlg"
data-modal-action="toggle">
Simple Modal XLarge
</dk-button>
<dk-modal
size="xl"
title="Simple Large Modal"
id="xlg">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Id in tempora labore
autem repudiandae distinctio, optio
eveniet minima dolores doloremque! Lorem
ipsum dolor, sit
</dk-modal>Modal Slots
<dk-button
data-modal-target="#modalslot"
data-modal-action="toggle">
Simple Modal With Slot
</dk-button>
<dk-modal id="modalslot">
<header slot="title">
Modal Title Slot
</header>
<section slot="content" class="-mx-3">
<table class="dk-table dk-table--lg dk-table--striped">
<thead>
<tr>
<th scope="col">
Qty Expected
</th>
<th scope="col">
Ship Date Estimate
</th>
</tr>
</thead>
<tbody class="body-sm">
<hello>
<td>1</td>
<td>12/24/2019</td>
</hello>
<tr>
<td>26</td>
<td>12/24/2019</td>
</tr>
</tbody>
</table>
</section>
<footer slot="footer">
<dk-button data-modal-dismiss="true">
Dismiss Btn
</dk-button>
<dk-button color="secondary">
Button Example
</dk-button>
</footer>
</dk-modal>Opening Methods
<dk-button
data-modal-target="#triggered-modal"
data-modal-action="toggle">
Auto WC Modal Trigger
</dk-button>
<button
class="dk-btn__primary"
data-modal-target="#triggered-modal">
Auto Vanilla Modal Trigger
</button>
<dk-modal
title="Auto Trigger"
id="triggered-modal">
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Laborum repellat
quae nam! Totam impedit modi, iure
voluptas numquam minima debitis.
</p>
</dk-modal>Header Img
<dk-button
data-modal-target="#image"
data-modal-action="toggle">
Simple Modal with Image
</dk-button>
<dk-modal
size="sm"
title="Simple Modal with Image"
id="image">
<img
src="https://bit.ly/2TRyrfw"
slot="header-img"
alt=""
/>
<section slot="content">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Id in tempora labore
autem repudiandae distinctio, optio
eveniet minima dolores doloremque!
Lorem ipsum dolor, sit
</section>
</dk-modal>