The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →To run code after a regular UIkit modal closes, 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 exists in the page and UIkit has loaded. The hidden event is the completed-close signal; use hide when your code must run as the closing animation begins.
Use the modal element, not a modal-instance method
UIkit exposes component events on the DOM element carrying the modal component. The documented utility listener form is:
UIkit.util.on(selector, event, callback)For a modal with id="loginmodal", a complete example is:
#1 Best Overall
<div id="loginmodal" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close" type="button" uk-close></button>
<p>Login form</p>
</div>
</div>
<script>
UIkit.util.on('#loginmodal', 'hidden', function (event) {
// Runs after UIkit has hidden the modal.
console.log('Modal closed', event);
});
</script>See the official UIkit Modal documentation for the component markup and event API.
Choose the event that matches your timing
| Event | When it fires | Use it for |
|---|---|---|
beforehide |
Before the item is hidden | Last-minute checks or preparation before closing |
hide |
After the hide transition has started | Work that should begin during the closing animation |
hidden |
After the item is hidden | Cleanup, refreshing data, or code that requires the modal to be fully closed |
For “run code after the modal closes,” use hidden. UIkit’s modal documentation lists these lifecycle events and distinguishes them from the opening events.
Registering the listener safely
- Load UIkit. The global
UIkitobject must be available before the listener runs. - Ensure the element exists. Register after the modal container has been rendered. In an Angular component, do this after the view containing the modal is created, and remove or avoid duplicate listeners when that view is destroyed and recreated.
- Target the container. Use the element with
uk-modal(for example,#loginmodal), not only its inner.uk-modal-dialog. - Use UIkit’s event names. Do not substitute Bootstrap or jQuery UI names such as
hidden.bs.modal.
What happens when the user closes the modal?
UIkit supports closing through its close control, the Escape key, and (by default) a click on the modal background. These paths use the same modal lifecycle, so a listener on hidden is the appropriate single place for post-close work. You can disable or change modal behavior through the options documented by UIkit.
Why then() is usually the wrong approach
UIkit documents promise-style callbacks for prepared dialogs such as UIkit.modal.alert(), UIkit.modal.confirm(), and UIkit.modal.prompt(). Those APIs process dialog input. A regular modal’s show() or toggle() call is not documented as returning a close promise, so chaining .then() is not a reliable replacement for the hidden event. The same documentation notes that UIkit.modal.dialog() returns the modal itself.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #3
Troubleshooting a listener that does not fire
- Confirm the selector matches the actual modal container and its ID is unique.
- Check that the container includes
uk-modaland the expected.uk-modal-dialogstructure. - Open the browser console and verify that UIkit loaded before the registration code executed.
- Register after dynamically rendered markup is present; a listener attached before an Angular view is created cannot target that missing element.
- Test with the exact event name
hidden, not a framework-specific variant. - Inspect the page for malformed script tags or other markup errors that prevent JavaScript from loading. A SitePoint discussion showed malformed plural
<scripts>tags in an early sample, but it did not establish those tags as the confirmed cause of that poster’s issue.
The March 2023 SitePoint discussion records the original question and several unsuccessful attempts, but it does not report a confirmed repair of the author’s Angular project. The documented UIkit event pattern above is the applicable solution for a regular modal.
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.
