UIkit: How to close modal when internal link is clicked w/ target="_blank" attribute?

Question

Helping edit a client's WordPress site, which uses UIkit as a framework. They've requested a pop up modal window appear when a link that leads to an external website is clicked. UIkit's baked in modal functionality makes this a breeze. The only issue is that, when using the target="_blank" attribute on the link, the destination opens successfully in a new browser tab but the modal window remains open. Would like it to close automatically once the link is clicked, should the user choose to remain on the page. Here's a code example:

<div id="external-link-modal-nas1" uk-modal="">
    <div class="uk-modal-dialog uk-margin-auto-vertical uk-modal-body">
        <a class="uk-button uk-button-primary" href="www.link.com" target="_blank" rel="noopener">Yes, I want to leave the site</a>
    </div>
</div>

Have been using the UIkit docs as a reference: https://getuikit.com/docs/modal

I can see what I need in there to accomplish the desired result (for example, the "beforehide" event), but I have not been able to figure out how to correctly implement it within the code.

Advice or insight would be greatly appreciated.

Answer 1

Add the uk-toggle attribute with the modal target to the link in the Popup. In your example, add uk-toggle="target: #external-link-modal-nas1" to the link. The toggle changes the visibility of elements, find more information here: https://getuikit.com/docs/toggle

Edited code example:

<div id="external-link-modal-nas1" uk-modal="">
    <div class="uk-modal-dialog uk-margin-auto-vertical uk-modal-body">
        <a class="uk-button uk-button-primary" href="www.link.com" target="_blank" rel="noopener" uk-toggle="target: #external-link-modal-nas1">Yes, I want to leave the site</a>
    </div>
</div>