UIKit Modal dialog

kaz · September 2, 2022

I need a modal dialog when the page is loading. When I have the following code in a simple HTML file, the UIKit modal dialog works fine.

<body>
<div id="modal-center" class="uk-flex-top" uk-modal>
        <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h2 class="uk-modal-title">Headline</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
</div>

…

<script>
    UIkit.modal("#modal-center").show();
</script>
</body>

When I put the code in PW, I get this error message:

Uncaught ReferenceError: UIkit is not defined
ReferenceError: "x" is not defined

UIKit scripts are fully loaded, actually everything should fit?

bernhard · September 2, 2022

28 minutes ago, kaz said:

UIKit scripts are fully loaded, actually everything should fit?

I guess they are not, because that's what the error says ? How/where/when do you load UIkit?

kaz · September 3, 2022

Hi @bernhard,

I load the scripts

<script src="/site/templates/assets/uikit/js/uikit.min.js"></script>
<script src="/site/templates/assets/uikit/js/uikit-icons.min.js"></script>
</body>

If I open the source code via Cmd + Option + U, the link is accessible, these scripts are loaded. I hope these are all the scripts I need for this function?

bernhard · September 3, 2022

Your examples are confusing. Your first snippet shows UIkit.modal().show() just before </body> and the second shows that you are loading the script just before </body>. So which one is true?

The loading order is important, so if you do that:

<script src="uikit.min.js"></script>
<script>console.log(UIkit)</script>

You should get a proper log in the devtools of your browser, but if you do that:

<script>console.log(UIkit)</script>
<script src="uikit.min.js"></script>

You'll get "undefined" for your UIkit variable. So if you did UIkit.modal(...).show() in the second example you'd get the error that you described.

What you can also do is to wrap your javascript in a document.ready callback:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  console.log(UIkit);
});
</script>

kaz · September 3, 2022

Sorry for the confusion. Both are loaded above the closing body, in that order:

UIkit.modal('#modal-center') .show();
script src="<?=urls()->

I just wanted to point out that both are above the closing /body.

The

<div id="modal-center" class="uk-flex-top" …

is directly below the body tag.

That was bad planning on my part. Of course I can only call a function when the script containing the function has been loaded before.

I have now solved it this way:

<script src="<?=urls()->templates?>assets/uikit/js/uikit.min.js"></script>
<script src="<?=urls()->templates?>assets/uikit/js/uikit-icons.min.js"></script>
<?php if ($page->id == 1 ): ?>
<script>
    UIkit.modal('#modal-center') .show();
</script>
<?php endif; ?>

That works fine. I have defined a query for Home, because the window may only be called up one time when loading the website. It will be an information window with medical advice. It would be great if it were only displayed once, but that is probably not possible with the UIKit function.

I didn't understand your explanation with ready.php, would the procedure make more sense? Or is document.ready callback different from the ready.php ?

bernhard · September 3, 2022

With document.ready I was referring to the javascript event that is fired when the DOM is ready. See here: https://stackoverflow.com/a/9899701/6370411

That has nothing to do with the server side ready.php file ?

1 hour ago, kaz said:

It will be an information window with medical advice. It would be great if it were only displayed once, but that is probably not possible with the UIKit function.

That's quite easy to do:

<script>
let infoShown = localStorage.getItem('medicalPopup');
if(!infoShown) {
    UIkit.modal(...).show();
    localStorage.setItem('medicalPopup', 1);
}
</script>

kaz · September 3, 2022

1 hour ago, bernhard said:

That's quite easy to do:

if we know "how"; thanks for your support!

kaz · October 10, 2022

I have a little error (code inspector) message due to the double if query:

Uncaught TypeError: UIkit.modal(...) is undefined
    <anonymous> https://localhost:8890/:240

In the prepend / append files I have these code:

prepend:

<?php if ($global->settings_modalwindow): ?>
<div id="modal-center" class="uk-flex-top" uk-modal>
       <?php echo $global->settings_modalwindow; ?>
</div>
<?php endif; ?>

append:

<?php if ($page->id == 1): ?>
<script>
    let infoShown = localStorage.getItem('infoPopup');
    if(!infoShown) {
            UIkit.modal('#modal-center') .show();
            localStorage.setItem('infoPopup', 1);
    }
</script>
<?php endif; ?>

The error message is generated by the code in the append file when the settings_modalwindow field has no content, but the code is still loaded. I would need to query both ID1 and whether the field has content. Is it possible to query both at once?

bernhard · October 10, 2022

3 minutes ago, kaz said:
have a little error (code inspector) message due to the double if query:
Uncaught TypeError: UIkit.modal(...) is undefined
    <anonymous> https://localhost:8890/:240

The reason for this error is that your code having "UIkit.modal..." is executed too early (before UIkit is available).

You need to make sure that you load UIkit before adding the script that shows the modal.

kaz · October 11, 2022

20 hours ago, bernhard said:

The reason for this error is that your code having "UIkit.modal..." is executed too early (before UIkit is available).

You need to make sure that you load UIkit before adding the script that shows the modal.

I load the UIkit scrips before UIkit.modal. Perhaps I'm misunderstanding something, have a look at the post from September 3. The error message appears only if the field settings_modalwindow has no entry. If the field has an entry, it works. That's why I thought it would be necessary to query both?

bernhard · October 11, 2022

Ok then it's not about loading order, then I guess that UIKit.modal() does only work if the modal has some content. If your modal html element does not have content then UIkit.modal(el).show() throws an error, so you either need to make sure that you have some content in your modal or that you show it only if the modal is created properly:

<?php if ($page->id == 1): ?>
<script>
    let infoShown = localStorage.getItem('infoPopup');
    if(!infoShown) {
            let modal = UIkit.modal('#modal-center');
      		if(modal) {
              modal.show();
	          localStorage.setItem('infoPopup', 1);
            }
    }
</script>
<?php endif; ?>

Maybe you need to change the IF condition to if(typeof modal != 'undefined')...

btw I copied your code and you had a space before the .show():

That might also cause problems...

kaz · October 12, 2022

It doesn't work, probably it's just too much 'if' in too many files? The modal window is not displayed, but exists in the source code of the browser. It is hard to describe, why it does not show up. So I just leave the error message, because it works with these error, although not clean.

I removed the space before .show(), it makes no difference.
PS: It's hard to test, because the popup appears only once :) that's why my reply took so long.

Sign In

UIKit Modal dialog

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members