Shortcodes

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.");
    }
});

Une Église qui vit la réconciliation et propage l’amour de Christ tant dans ses réunions, ses cultes et ses projets que dans ses relations.

Une communauté chrétienne d’arrière-plan protestant se voulant œcuménique.

Most Popular News