There are four different sizes for modals; dk-modal--sm, dk-modal, dk-modal--md (both dk-modal and dk-modal--md are the same size), dk-modal--lg, dk-modal--xl. All four of these sizes set the max-width of the modal. All of the modals are designed to be responsive by default.
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 or use the site mask utility.
// Using a string as a selector
dk.modal("#modalSelector").toggle();
dk.modal("#modalSelector").show();
dk.modal("#modalSelector").hide();
// Using a dom element as a target
const modalElm = document.querySelector("#modalSelector");
dk.modal(modalElm).toggle();
dk.modal(modalElm).show();
dk.modal(modalElm).hide();
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.
FAQ
Auto button not working?
One option if the auto modal triggers aren't working is to run the following javascript function after the modals have been rendered.
dk._interals.auto.autoModal();
Close button or mask not closing modal?
If the close button or mask arent working to close your modals the following script will attach a click event to any of the elements containing the data-modal-dismiss=true attributes. Will be updated with a non-jquery version soon.
$(".dk-modal [data-modal-dismiss='true']").on("click", function () {
var modalId = $(this).closest(".dk-modal").attr("id");
dk.modal("#" + modalId).hide();
})
Modal
<div>
<button
class="dk-btn__primary"
data-modal-target="#modal">
Show Default Modal
</button>
<aside
class="dk-modal"
id="modal"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-label="Modal Title">
<header class="dk-modal__title">
Default Modal Headline
</header>
<section class="dk-modal__content">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Id in tempora labore autem
repudiandae distinctio, optio
eveniet minima dolores
doloremque!
</p>
</section>
<footer class="dk-modal__footer">
<button
class="dk-btn__primary"
data-modal-dismiss="true">
CTA
</button>
</footer>
<span
title="Close Message"
class="dk-modal__close"
data-modal-dismiss="true"></span>
</aside>
</div>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#modal").show();
}
}Modal Small
<button
class="dk-btn__primary"
data-modal-target="#modalSmall">
Show Modal
</button>
<aside
class="dk-modal--sm "
id="modalSmall"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-label="Modal Title">
<header class="dk-modal__title">
Modal Title
</header>
<section class="dk-modal__content">
<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
</p>
</section>
<footer class="dk-modal__footer">
<button class="dk-btn__primary">
CTA
</button>
</footer>
<span
title="Close Message"
class="dk-modal__close"></span>
</aside>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#modalSmall").show();
}
}Modal Large
<div>
<button
class="dk-btn__primary"
data-modal-target="#modalLarge">
Show Modal
</button>
<aside
class="dk-modal--lg "
id="modalLarge"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-label="Modal Title">
<header class="dk-modal__title">
Modal Title
</header>
<section class="dk-modal__content">
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Id in tempora labore autem
repudiandae distinctio, optio
eveniet minima dolores
doloremque!
</p>
</section>
<footer class="dk-modal__footer">
<button class="dk-btn__primary">
CTA
</button>
</footer>
<span
title="Close Message"
class="dk-modal__close"
data-modal-dismiss="true"></span>
</aside>
</div>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#modalLarge").show();
}
}Modal XL
<div>
<button
class="dk-btn__primary"
data-modal-target="#modalXL">
Show XL Modal
</button>
<aside
class="dk-modal--xl "
id="modalXL"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-label="Modal Title">
<header class="dk-modal__title">
Modal Title
</header>
<section class="dk-modal__content">
<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
</p>
</section>
<footer class="dk-modal__footer">
<button class="dk-btn__primary">
CTA
</button>
</footer>
<span
title="Close Message"
class="dk-modal__close"></span>
</aside>
</div>Small Image
<div>
<button
class="dk-btn__primary"
data-modal-target="#smallImageModal"
data-modal-action="show">
Show Small Image Modal
</button>
<aside
class="dk-modal--sm dk-modal--image "
role="dialog"
aria-modal="true"
aria-hidden="true"
id="smallImageModal"
aria-label="Modal Title">
<div class="dk-modal__picture">
<img
src="https://bit.ly/2TRyrfw"
alt=""
/>
</div>
<header class="dk-modal__title">
Message Headline 2
</header>
<section class="dk-modal__content">
<p>
Message Text: Lorem ipsum
dolor sit amet, consectetur
adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Lorem, ipsum dolor sit amet
consectetur adipisicing elit.
Debitis commodi sapiente
tempora vitae magnam
blanditiis a voluptatem quis
facilis ratione. Quod esse
ipsum, illum et, earum quidem
debitis illo quasi
exercitationem nemo vel dolore
placeat
</p>
</section>
<footer class="dk-modal__footer">
<a
class="dk-btn__primary"
data-modal-dismiss="true">
CTA
</a>
</footer>
<span
title="Close Message"
class="dk-modal__close"
data-modal-dismiss="true"></span>
</aside>
</div>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#smallImageModal").show();
}
}Large Image
<div>
<button
class="dk-btn__primary"
data-modal-target="#largeImageModal"
data-modal-action="show">
Show Large Image Modal
</button>
<aside
class="dk-modal--lg dk-modal--image"
role="dialog"
aria-modal="true"
aria-hidden="true"
data-modal-type="modal"
id="largeImageModal"
aria-label="Modal Title">
<div class="dk-modal__picture">
<img
src="https://bit.ly/2TRyrfw"
alt=""
/>
</div>
<header class="dk-modal__title">
Message Headline 2
</header>
<section class="dk-modal__content">
<p>
Message Text: Lorem ipsum
dolor sit amet, consectetur
adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
</section>
<footer class="dk-modal__footer">
<a
class="dk-btn__primary"
data-modal-dismiss="true">
CTA
</a>
</footer>
<span
title="Close Message"
class="dk-modal__close"
data-modal-dismiss="true"></span>
</aside>
</div>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#largeImageModal").show();
}
}Alert Modal
<div>
<button
class="dk-btn__primary"
data-modal-target="#alertModal"
data-modal-action="show">
Show Alert Modal
</button>
<p>
An alert modal is a modal without a
close button that requires a user to
click a specific call to action to
continue. The mask wont close the
modal either.
</p>
<aside
class="dk-modal"
data-modal-type="alert"
role="dialog"
aria-modal="true"
aria-hidden="true"
id="alertModal"
aria-label="Modal Title">
<header class="dk-modal__title">
Alert Modal Title
</header>
<section class="dk-modal__content">
<p>
Message Text: Lorem ipsum
dolor sit amet, consectetur
adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>
</section>
<footer class="dk-modal__footer">
<a
class="dk-btn__primary"
data-modal-dismiss="true">
CTA
</a>
</footer>
</aside>
</div>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#alertModal", "alert").show();
}
}Panel Modal
<div>
<button
class="dk-btn__primary"
data-modal-target="#modalPanel">
Show Panel Modal
</button>
<p>
A panel modal will attach to the side
of the page (default is the right
side) when the screen is larger than
768px. Below 768px it displays as a
standard modal. Adding the attribute
data-modal-type="panel" will
make the mask only appear on the
smaller screen sizes.
</p>
<aside
class="dk-modal--panel"
id="modalPanel"
data-modal-type="panel"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-label="Modal Title">
<header class="dk-modal__title">
Modal Title
</header>
<section class="dk-modal__content">
<p>Modal text content</p>
</section>
<footer class="dk-modal__footer">
<button
class="dk-btn__primary"
data-modal-dismiss="true">
OK
</button>
</footer>
<span
title="Close Message"
class="dk-modal__close"
data-modal-dismiss="true"></span>
</aside>
</div>Javascript
dk => {
if (window.inStorybook) {
dk.modal("#modalPanelWithMask").show();
}
}Panel Modal With Mask
<div>
<button
class="dk-btn__primary"
data-modal-target="#modalPanelWithMask">
Show Panel Modal
</button>
<p>
A panel modal will attach to the side
of the page (default is the right
side) when the screen is larger than
768px. Below 768px it displays as a
standard modal. This version
doesn't have the
`data-panel-type` attribute and will
display the standard modal mask at all
sizes.
</p>
<aside
class="dk-modal--panel"
id="modalPanelWithMask"
role="dialog"
aria-modal="true"
aria-hidden="true"
aria-label="Modal Title">
<header class="dk-modal__title">
Modal Title
</header>
<section class="dk-modal__content">
<p>Modal text content</p>
</section>
<footer class="dk-modal__footer">
<button
class="dk-btn__primary"
data-modal-dismiss="true">
OK
</button>
</footer>
<span
title="Close Message"
class="dk-modal__close"
data-modal-dismiss="true"></span>
</aside>
</div>