Create modal dialogs with different styles and transitions.
\n\nUsage
\nThe modal component consists of an overlay, a dialog and a close button.
\n\nClass | \nDescription | \n
---|---|
.uk-modal | \n 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. | \n
.uk-modal-dialog | \n Add this class to a child <div> element to create the dialog box. | \n
.uk-modal-close | \n 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. | \n
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
\n\n \n Open\n \n\nMarkup
\n\n<!-- This is an anchor toggling the modal -->\n<a href="#my-id" data-uk-modal>...</a>\n\n<!-- This is a button toggling the modal -->\n<button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button>\n\n<!-- This is the modal -->\n<div id="my-id" class="uk-modal">\n <div class="uk-modal-dialog">\n <a class="uk-modal-close uk-close"></a>\n ...\n </div>\n</div>
\n\n \n\n
JavaScript options
\n\nBy 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.
\n\n
Modal header and footer
\n\nYou can create a header and footer for your modal, which are seperated from the content. Just add the .uk-modal-header
or the .uk-modal-footer
class to a <div>
element inside the modal dialog.
Example
\n\n \nHeadline
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\n \nMarkup
\n\n<div class="uk-modal">\n <div class="uk-modal-dialog">\n <div class="uk-modal-header">...</div>\n ...\n <div class="uk-modal-footer">...</div>\n </div>\n</div>
\n\n \n\n
Modal caption
\n\nYou can also create a caption that will be placed outside the modal. Just add the .uk-modal-caption
class to a <div>
element inside the modal dialog.
Example
\n\n \nHeadline
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nMarkup
\n\n<div class="uk-modal">\n <div class="uk-modal-dialog">\n <div class="uk-modal-caption">...</div>\n </div>\n</div>
\n\n \n\n
Modal spinner
\n\nTo place a spinning icon inside your modal, add the .uk-modal-spinner
class to a <div>
element inside the modal dialog.
Example
\n\n Open\nMarkup
\n\n<div class="uk-modal">\n <div class="uk-modal-dialog">\n <div class="uk-modal-spinner">...</div>\n </div>\n</div>
\n\n \n\n
Lightbox modifier
\n\nTo create a lightbox-like modal dialog, just add the .uk-modal-dialog-lightbox
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 dialog.
Example
\n\n \n \n\nMarkup
\n\n<!-- This is the anchor toggling the modal -->\n<a href="#my-id" data-uk-modal>...</a>\n\n<!-- This is the modal -->\n<div id="my-id" class="uk-modal">\n <div class="uk-modal-dialog uk-modal-dialog-lightbox">\n <a href="" class="uk-modal-close uk-close uk-close-alt"></a>\n <img src="" alt="">\n </div>\n</div>
\n\n NOTE When creating a close button within the lightbox modifier, we also recommend adding the .uk-close-alt
class from the Close component to the close button to give your button a styling that fits the lightbox modal.
\n\n
Center Modal
\n\nTo vertically center the modal, add the {center:true}
option to the data-attribute.
Example
\n\n Open\n\nMarkup
\n\n<a href="#my-id" data-uk-modal="{center:true}"></a>
\n\n \n\n
Large dialog modifier
\n\nTo apply the site’s container width to the modal dialog, just add the .uk-modal-dialog-large
class.
Example
\n\n Open\nHeadline
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nMarkup
\n\n<div class="uk-modal-dialog uk-modal-dialog-large">...</div>
\n\n \n\n
Overflow container in modal
\n\nYou 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
\n\n Open\nHeadline
\nSome text above the scrollable box
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nOverflow container
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nSome text below the overflow container
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\nMarkup
\n\n<div class="uk-modal-dialog">\n <p>...</p>\n <div class="uk-overflow-container">...</div>\n <p>...</p>\n</div>
\n\n \n\n
JavaScript
\n\nYou can handle modal dialogs via raw javascript.
\n\nExample
\n\nvar modal = UIkit.modal(".modalSelector");\n\nif ( modal.isActive() ) {\n modal.hide();\n} else {\n modal.show();\n}
\n\n \n\n
Events
\n\nThe modal component triggers an show.uk.modal
event every time a modal is opened and hide.uk.modal
when a modal is closed.
Example
\n\n$('.modalSelector').on({\n\n 'show.uk.modal': function(){\n console.log("Modal is visible.");\n },\n\n 'hide.uk.modal': function(){\n console.log("Element is not visible.");\n }\n});
\n\n Events
\n\nName | \nParameter | \nDescription | \n
---|---|---|
show.uk.modal | \n event | \nOn modal show | \n
hide.uk.modal | \n event | \nOn modal hide | \n