UIkit：单击内部链接时如何关闭模式（带有 target=“_blank”）属性？

发布于 2025-01-21 02:56:05 字数 743 浏览 2 评论 0原文

帮助编辑客户的 WordPress 网站，该网站使用 UIkit 作为框架。他们要求在单击指向外部网站的链接时显示弹出模式窗口。 UIkit 内置的模态功能使这变得轻而易举。唯一的问题是，当在链接上使用 target="_blank" 属性时，目标会在新的浏览器选项卡中成功打开，但模式窗口仍保持打开状态。如果用户选择留在页面上，希望在单击链接后自动关闭。这是一个代码示例：

<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>

一直使用 UIkit 文档作为参考： https://getuikit.com/docs/modal

我可以在那里看到我需要什么来实现所需的结果（例如，“beforehide”事件），但我无法弄清楚如何在代码中正确实现它。

建议或见解将不胜感激。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

池木 2025-01-28 02:56:05

将带有模态目标的英国折断属性添加到弹出窗口中的链接。
在您的示例中，添加 uk-toggle =“ target：＃外部链接 - 摩丁 - nas1” 到链接。
切换更改元素的可见性，在此处找到更多信息： https://getuikit.com/docs/docs/doggle

编辑的代码示例：

<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>

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>

回复收藏 0 原文

~没有更多了~