Automatic Modal Popup with UIKit and jQuery

Worse than 404 pages.  Worse than those spam emails that appear in your inbox.  Even worse than those chain letters your mother keeps sending, thinking you might get a small chuckle or learn something new.  Yes, possibly worse than all of the above put together, is the internet modal popup.

There was a time in the early days of the internet in which popups were appearing in a different window.  This was driving the casual user to tears when they couldn’t figure out where that celebratory sound for being the one millionth visitor was coming from, forcing them to close six new browser windows that seem to have come out of no where.

Nowadays that kind of practise is largely frowned upon, and modern browsers actively block window popups by default.  But that hasn’t stopped innovative people from applying that idea in new and acceptable ways.

Enter a new era: the web modal

The sudden background dim, the aggravating ad appearance, the disorientation one feels when they no longer find themselves reading that recipe for moroccan chicken and are instead looking for that elusive close button. All this in the hope to promote a product, service, gain subscribers, offer a discount, or simply frustrate an audience.

There are many ways in which you can activate a modal too.  Clicking a button, hovering outside an area, scrolling past a certain point, all can trigger a modal to popup and greet you with its lorem ipsum like message.  For the purposes of this post, I’ll be setting a timer to display the popup.  For ease and convenience, the trigger will be written in jQuery, and the modal will be powered by the UIKit framework.

The HTML

<div id="modal-close-default" uk-modal>
  <div class="uk-modal-dialog uk-modal-body">
    <button class="uk-modal-close-default" type="button" uk-close></button>    

    <!-- unique content goes here -->
  </div>
</div>

With the UIKit framework, you get a pretty solid looking and fully functional modal right out of the box. This HTML code is taken from the UIKit site and stripped of the majority of its body content. What you’re left with is a close button, and a comment to replace and throw whatever you want in it.

Regardless of where you insert this bit of HTML, the UIKit modal will relocate to the end of the DOM, just before the closing of the body tag. This is great, as it becomes its own parent element in the DOM. This will prevent any issues of items or content with a high z-index interfering with the modal.

Now you may have jumped the gun with the copy and pasting of the above code into your editor, hitting save, and refreshing the page only to see nothing happen. This is because the modal is hidden by default. It needs a trigger in order to appear.

That’s where this bit of HTML comes in:

<button class="uk-button uk-button-default" hidden id="popupTrigger" uk-toggle="target: #modal-close-default" type="button">Open Popup</button>

Also copied from the UIKit documentation, with a few modifications.  I’ve removed one of the default classes and changed the label text.  You can remove all of the classes and label though, as they are redundant for this specific purpose. I’ve also added a unique ID to make the jQuery a little smaller, but that’s also optional.

This will be what triggers the popup, but we don’t want it to be visible or accessible to the user, which is why we add a hidden attribute. This will hide the button from appearing on the users screen.  As a result, you can place this piece of HTML anywhere within your DOM as well.

You can remove the hidden attribute when you add the button into your code to test and verify that the popup is working. Once satisfied, all we need now is something to toggle the button to trigger the popup. Something like a timer?

The Javascript

  $( "#popupTrigger" ).delay( 4000 ).click();

Yup, that’s all it is, just one line of code: a target, a delay, and an action. After four seconds, a click event will fire on the popupTrigger button, and the popup modal will display on the page.

That’s all there is to it! For a more stylized and detailed demo of this, check out this codepen.