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 Modal Change this Text
</button>
<aside
class="dk-modal"
id="modal"
role="dialog"
aria-modal="true"
aria-hidden="true">
<header class="dk-modal__title">
Different 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"
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">
<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">
<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">
<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">
<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"
id="largeImageModal">
<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();
}
}