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.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.