Popup-test

 

Modal blank

To reset all styling, like padding and margin, add the .uk-modal-dialog-blank class. This can be useful, if you want to create a fullscreen modal. In that case you also need to add the .uk-height-viewport class from the Utility component so that the modal extends to full viewport height.

Example

Open
<!-- 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-blank">...</div>
</div>

To place a spinning icon inside your modal, add the .uk-modal-spinner class to a <div> element inside the modal dialog.

Example

Open

Markup

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

Center Modal

To vertically center the modal, add the {center:true} option to the data-attribute.

Example

Open

Markup

<a href="#my-id" data-uk-modal="{center:true}"></a>

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>

Dialogs

The modal component also provides alternatives to the native dialogs: window.alert, window.confirm and window.prompt.

Example

UIkit.modal.alert("Attention!");
UIkit.modal.confirm("Are you sure?", function(){
    // will be executed on confirm.
}[, oncanel, options]);
UIkit.modal.prompt("Name:", value, function(newvalue){
    // will be executed on submit.
});
var modal = UIkit.modal.blockUI("Any content..."); // modal.hide() to unblock

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 show.uk.modal event every time a modal is opened and hide.uk.modal when a modal is closed.

Example

$('.modalSelector').on({

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

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

JavaScript options

OptionPossible valueDefaultDescription
keyboard boolean true Allows controls from keyboard (ESC to close)
bgclose boolean true Allow modal to close automatically when clicking on the modal overlay
minScrollHeight integer 150 Set the height for overflow container to start scrolling
center boolean false Vertically center the modal
modal boolean true Close currently opened modals on opening modal