Develop Reference

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

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.

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>

How to click these buttons using Javascript?

I found this html code on a website which is a click button and I want to learn how to click on this button using Javascript. Please someone help me to understand how to click such buttons. I'm trying this from past one hour.
This is the button which I want to click:
<div class="Button">
Tap this button
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p></div>
this is not my code. Its from a website.

You need to close the first div with a closing tag. Below is the updated code with the closing tag.
<div class="Button">
Tap this button
</div>
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p>
</div>
What is the purpose of enclosing your a tag in a div ? Can't you use only the a ?
You do not have any button in the HTML snipper shown, only div, a, and p
A button would be a <button>.
to click them using your current code you can use
<script>
document.getElementsByClassName("button")[0].click();
document.getElementsById("ButtonID").click();
</script>
A correct, valid and clear code would be
<!-- What is this button meant to do ? Can you use an actual button or do you HAVE to use a <a> ?
<button id="clickUsingJs" class="button yellow-btn addToCart trackEvent" rel="Thebutton" data-action="Tap">
Tap this button
</button>
<script>
document.getElementById("clickUsingJs").click();
</script>

<div class="Button" id="button1" onclick ="call some javascript method">
Tap this button
<div id="ButtonTwo" class="ButtonTest2" onClick="call some javascript method">
<p class="MeButton" id="ButtonID">Final button test</p></div>
try this

Make a div always on top using JavaScript

I am working on a simple HTML/JavaScript project. In this I have a main div, in this div I have another div which is not visible initially.
<div>
<div class="warning" id="time-alert" style="visibility:hidden">
<span style="font-weight:bold">your time is up To extend the time click on
extend button.
<input type="button" id="extend-btn" onclick="clickaction()" value="Extend">
</div>
<div class="create pull-right">
<button id="btn-create" type="button" class="btn btn-primary"
onClick="openmodal()">open modal</button>
</div>
</div>
When user clicks on open modal button, a Bootstrap modal pops up. Now I am making that time-alert div visible continuously on 2 minutes interval by JavaScript. When I am on home page it's working fine but if model has already opened on the screen, the alert div is not showing above the modal. Can you please tell me how can I do this with JavaScript?

Try to put the HTML of your bootstrap modal before the "time alert" div. That way, the modal box should stay behind the time alert. You may want to add a z-index to the CSS of the time alert if need be.

I have a button that when clicks it opens the link in the same page

I need the code to make it a pop-up in a different window.
Here is the code that is there if you could please tell me what code needs to be added that would help
<p>
<a class="btn"
onclick="link"
href="http://sizechartcms.finntack.com/?cat=competition&id=32086&lang=en_US">
Size Chart
</a>
</p>

Add target=_blank to open a new window:
<a target=_blank class="btn" href="http://sizechartcms.finntack.com/?cat=competition&id=32086&lang=en_US">Size Chart</a>
And remove onclick="link"

If you want something to show up in a new tab, you need to add target="_blank" into the a tag like so:
<a target="_blank">

How to call a popup from a link inside another popup. Jquery Mobile

I have a popup like this:
<div data-role="popup" id="popup1">
Link to open popup
</div>
And the div for the popup with id="pop" is:
<div data-role="popup" id="pop">
<!-- Content Here -->
</div>
So how do I open the popup with id="popup" from a link which is already inside a popup.
I tried the regular way. Did not work!
$("#popup1").popup('close');
$("#pop").popup('open');
Even the above did not work!

JQM Popups cannot be chained. You have to fire the second after a timer delay.
See the JQM documentation and search for "chain": http://api.jquerymobile.com/popup/