How to subscribe to Modal Close event of UIkit.Modal

JavaScript
1

There is documentation for UIkit - https://getuikit.com/docs/modal
But how to catch up Modal form close event?
For example, this is my Modal dialog $(“#loginmodal”) and what next?
Uikit used jQueryUI as engine of Modal dialog.

2

According to the docs you linked to, you can do this:

UIkit.modal.alert('UIkit alert!').then(function () {
  console.log('Alert closed.')
});
3

tkank you @James_Hibbard, but maybe this rules working only with Alert.
I use ‘modal’ method, in this case ‘then’ after ‘show()’ don’t working (I have check)

ngOnInit(): void {
    UIkit.modal("#loginmodal").show().then(function () {
    console.log('Closed.')
  });
}

Also I have another template to use UIkit modal

 ngOnInit(): void {
    var modal = UIkit.modal("#loginmodal");
    $('#openmodal3').on('click', function() {
       modal.toggle().then(function () {
         console.log('Closed.')
     });
   });
 }

Unfortunately, In this case ‘then’ after ‘toggle’ also don’t working.

4

Well I guess there’s a hidden event that you could look at (also documented on that page).

If that doesn’t work, could you post some code which I can run on my PC to recreate your problem — just enough code (with the relevant libraries) to show a modal basically.

1 Like
5

Thank you, @James_Hibbard . But unfortunately this is not simple. What syntax at all, for your opinion can be to bind to ‘hidden’ event?
I have 5 ideas, but unfortunately non of them are working.

 UIkit.modal("#loginmodal").hidden(function(e){
       console.log(e);
 });
 UIkit.modal("#loginmodal","hidden")(function(e){
       console.log(e);
 }); 
 UIkit.util.on(document, 'event', "#loginmodal", function (e: any) {
      console.log(e);
 });
 $("#loginmodal").on('dialogclose', function (e) {
      console.log(e);
 });
 $("#loginmodal").on('pagehide', function (e) {
     console.log('e');
 });
6

Shame :frowning:

Could you then post some code which I can run on my PC to recreate your problem — just enough code (with the relevant libraries) to show a modal.

7

Unfortunately It’s not simple, because currently there are nothing simple JS projects, you need at least installed Angular, Node.JS - then full tuning Angular project environment, then configure UIKit, than Modal framework. This is not simple procedure and usually need more than one days from scratch. Angular project a lot has a lot of very special components, like Interceptor, Base page, Validators, Router and so on.
On the screen you can see my UIKit Modal window, but it strong integrated to project.

Frontend_03112023_235806
Frontend_03112023_2358062560×1380 391 KB

But, if you have interest, you can use this test page

  <html>
  <head>
  <scripts src="node_modules/jquery/dist/jquery.min.js">
  <scripts src="node_modules/uikit/dist/js/uikit.min.js">
  <scripts src="node_modules/uikit/dist/js/uikit-icons.min.js">
  <scripts>
       UIkit.modal("#loginmodal").show();
  <scripts>
  </head>
  <body>
  <div id="container">MyPage</div>
  <a href="#loginmodalplace" uk-toggle ></a>
  <div id="loginmodal" uk-modal>MyModal</div>
  <body>
 </html>
8

Never tried bur maybe this works

$(‘#myModal’).on(‘hidden.bs.modal’, function () {
// do something…
})

9

Lol, that’s true.

Based on the code you posted, I now have this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>UIKit</title>
  <link rel="stylesheet" href="https://unpkg.com/uikit@3.16.6/dist/css/uikit-core.min.css">
</head>
<body>
  <div id="container">MyPage</div>
  <a href="#loginmodalplace" uk-toggle></a>
  <div id="loginmodal" uk-modal>MyModal</div>

  <script src="https://unpkg.com/jquery@3.6.4/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/uikit@3.16.6/dist/js/uikit.min.js"></script>
  <script src="https://unpkg.com/uikit@3.16.6/dist/js/uikit-icons.min.js"></script>
  <script>
    UIkit.modal("#loginmodal").show();
  </script>
</body>
</html>

The modal shows, but without text or anything and no way of closing it.

Could you maybe update the above code so that a proper modal shows?

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.