Modal
Modals use Magnific Popup.
- Default modals are inline modals
- Add an element to open the button
- Add an element to be opened as a modal
Open modal
Title
Modal content
<a class="k-js-inline-modal" data-mfp-src="#example-inline-modal" href="#">
Open modal
</a>
<div id="example-inline-modal" class="mfp-hide">
<div class="k-inline-modal">
<div class="k-inline-modal__title">Title</div>
<p>Modal content</p>
</div>
</div>
Small modal
Open modal
Title
I'm a small modal
<a class="k-js-inline-modal" data-mfp-src="#example-inline-modal3" href="#">
Open modal
</a>
<div id="example-inline-modal3" class="mfp-hide k-small-inline-modal-holder">
<div class="k-inline-modal">
<div class="k-inline-modal__title">Title</div>
<p>I'm a small modal</p>
</div>
</div>
iFrame modal
<a class="k-js-iframe-modal" href="https://www.joomlatools.com">
Open modal
</a>
Image modal
Image modals do not need an item to be shown in a modal but use the href=""
attribute instead.
<a class="k-js-image-modal" href="https://www.joomlatools.com/images/layout/docman/screenshots/easy-to-use.png">
Open modal
</a>
Need Help? Let our developers personally assist you. Business or Agency subscribers can ask development related questions in our Support Center.