To run code after a regular UIkit modal has finished closing, listen for the hidden event on the modal element:
UIkit.util.on('#loginmodal', 'hidden', function (event) {
console.log('Modal closed', event);
});Register the listener after the modal element is present in the page and UIkit has loaded. Use hide instead when the callback should run as the closing transition begins.
Use the modal element’s hidden event
UIkit exposes modal lifecycle events on the element carrying the modal component. The hidden event is the completed-close signal: it fires after the modal has been hidden. A selector-based listener is:
UIkit.util.on('#loginmodal', 'hidden', function (event) {
console.log('Modal closed', event);
// Refresh data, restore focus, clear state, or run other cleanup here.
});This follows the event-listener pattern shown in the UIkit Modal documentation. The selector must identify the modal container, not merely its inner dialog.
#1 Best Overall
Choose the event that matches your timing
| Event | When it fires | Typical use |
|---|---|---|
beforehide |
Before the item is hidden | Last-moment checks or preparation before closing |
hide |
After the hide transition has started | Start work as the closing animation begins |
hidden |
After the item is hidden | Run code only after the modal is fully closed |
For “run code after the modal closes,” use hidden. UIkit’s event names and lifecycle are documented in its Modal component reference.
Make sure the modal markup and listener are in place
A regular UIkit modal has a container with the uk-modal attribute, a dialog child, and usually a close control:
<div id="loginmodal" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close" type="button" uk-close></button>
<form></form>
</div>
</div>UIkit enables Escape-key and background-click closing by default. All of those closing paths dispatch the same modal lifecycle events, so one hidden listener can handle them.
Initialization order
- Load UIkit’s JavaScript.
- Ensure the modal element has been rendered.
- Register
UIkit.util.on('#loginmodal', 'hidden', callback). - Open and close the modal to verify the callback.
In an Angular or other component-based application, attach the listener after the component’s view has created the modal element, and remove or avoid duplicate listeners when that view is destroyed and recreated.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #3
Do not treat a regular modal like a promise-based dialog
UIkit documents then() callbacks for prepared dialogs such as UIkit.modal.alert(), confirm(), and prompt(). Those APIs process dialog input. They are different from an ordinary modal created with uk-modal or UIkit.modal(element, options).
For a regular modal, do not assume that show() or toggle() returns a promise that resolves when closing finishes. Subscribe to the element’s hidden event instead. The documentation also notes that UIkit.modal.dialog() returns the modal itself; that does not turn every modal method into a close promise.
Troubleshoot a listener that never fires
- Check the selector:
#loginmodalmust be the actual element withuk-modal. - Check timing: register the handler only after the element exists and UIkit is available.
- Check the event name: use UIkit’s lowercase
hidden, not Bootstrap or jQuery UI event names. - Check the page structure: include the modal container and its
.uk-modal-dialogchild. - Check the test page: malformed script tags or an incomplete example can prevent JavaScript from loading, although the related forum discussion does not establish those issues as the cause of the original Angular problem.
The March 2023 SitePoint discussion records the question and several unsuccessful approaches, but it does not report a confirmed repair for the poster’s project. The documented UIkit event API is the reliable basis for the listener above.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
