TEMPLATE FEATURES

 

 

Modal

Create modal dialogs with different styles and transitions.

Usage

The modal component consists of an overlay, a dialog and a close button.

ClassDescription
.uk-modal Add this class to a <div> element to create the dialog container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling.
.uk-modal-dialog Add this class to a child <div> element to create the dialog box.
.uk-modal-close Add this class to an <a> or <button> element to create a close button within the dialog box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-uk-modal attribute. If you are using another element, like a button, just add the data-uk-modal="{target:'#ID'}" attribute to target the modal's id.

Example

Open

Markup

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

JavaScript options

By default, the modal closes automatically when clicking on the modal overlay. To prevent this from happening, just add the data-uk-modal="{target:'#ID',bgclose:false}" attribute.

Frameless modifier

By default, the modal box has a padding. To avoid this and remove any framing, just add the .uk-modal-dialog-frameless class. This can be useful, if you want to use the modal as a lightbox for your images. The close button will adjust its position automatically to the frameless dialog.

Example

Markup

<!-- This is the anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-frameless">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="" alt="">
    </div>
</div>

NOTE When creating a close button within the frameless modifier, we also recommend adding the .uk-close class from the Close component. In that case you need to add the .uk-close-alt class as well to give your button a styling that fits the frameless modal.

Large dialog modifier

To apply the site's container width to the modal dialog, just add the .uk-modal-dialog-large class.

Example

Open

Markup

<div class="uk-modal-dialog uk-modal-dialog-large">...</div>

Overflow container in modal

You can also display the modal's content in a scrollable container. Just add the .uk-overflow-container class to a <div> element inside the modal dialog. The modal will automatically expand and fill the site's height.

Example

Open

Markup

<div class="uk-modal-dialog">
    <p>...</p>
    <div class="uk-overflow-container">...</div>
    <p>...</p>
</div>

JavaScript

You can handle modal dialogs via raw javascript.

Example

var modal = $.UIkit.modal(".modalSelector");

if ( modal.isActive() ) {
    modal.hide();
} else {
    modal.show();
}

Events

The modal component triggers an uk.modal.show event every time a modal is opened and uk.modal.hide when a modal is closed.

Example

$('.modalSelector').on({

    'uk.modal.show': function(){
        console.log("Modal is visible.");
    },

    'uk.modal.hide': function(){
        console.log("Element is not visible.");
    }
});

About Us

Curabitur sollicitudin neque ante, commodo efficitur libero semper et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam at suscipit mi. Maecenas et elit sem. Suspendisse a laoreet sem. Integer facilisis, magna at volutpat volutpat

Latest Posts

Tags

Business Hours

Our support Hotline is available 24 Hours a day: (+61) 023 456 7805

Monday-Friday: 9am to 5pm
Saturday: 10am to 2pm
Sunday: Closed from 10am
Public Holidays: Closed all day

client1.jpgclient2.jpgclient3.jpgclient4.jpgclient5.jpgclient6.jpgclient7.jpgclient8.jpgclient9.jpg