Skip to content

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

<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

<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.joomla.org">
    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. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.