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>

Html > Redirect to a new Page and Refresh the Main Page where the Button is

I create a Button using HTML and CSS with this Code
<article>
<span class="image">
<img src="images/test.jpg" alt="" />
</span>
<header class="major">
<h3><a href="#" class="link" >Test</a></h3>
<p>Test</p>
</header>
</article>
I want the following to happen when you click this Button:
A new link opens in a new Tab (I know that you can do this with target="_blank" and when you go to the new tab, the page where this button is gets reloaded / refreshed.
I tried a few things with JavaScript but nothing worked.
Here is what I tried:
<h3><a href="#" onclick="window.open('http://www.yahoo.com', '_blank')();window.location.href=window.location.href();" class="link" >Teamspeak</a></h3>

<h3>Test</h3>
Because href is not a function. No need of parenthesis. In your javascript code href is used as href().
Please remove the extra pair of parenthesis after window.open function also.

Call a javascript function from <a onclick="javascript:fn ()" >load </a>.
From that function, open this url and do window.location.reload () to reload current page.

Changing image gallery by button

First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.
Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.
This is what I got right now:
This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!
UPDATE:
Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.

I think you are looking for this: http://isotope.metafizzy.co/

You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container
<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
</div>
<div id="cat2" class="cat" style="display:none;">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
</div>
<div id="cat3" class="cat" style="display:none;">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
</div>
</div>
And add this Jquery code to the end of the page
function show(id)
{
$('.cat').hide();
$('#cat'+id).css('display','block');
}
$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});

Showing larger images with AddThis widget

I'm using the AddThis widget and I copied the default code for the first option they have, which is the one with the facebook like, tweet etc... that code being:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxxx"></script>
<!-- AddThis Button END -->
However I wanted to add a Google Plus button as well, so I added this in to the code:
<a class="addthis_button_google_plusone"></a>
However this output a much smaller image compared to the others. Is there any way to get the more appropriate sized image?
Here is what it currently looks like:
As you can see the Google Plus icon is too small, however that's the right icon I want, just bigger; don't want the "badge".

Update:
Use size to size your buttons:
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
Link to guide - Larger Standard
Add this third party buttons - link (like Google +1)
Also, Code (maybe this is what you want):
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_google_plusone_badge" g:plusone:href="...your-link..."></a>
</div>
OR, in your code itself, just add another anchor tag to the div:
<a class="addthis_button_google_plusone_badge" ></a>

JavaScript Back Button Failure

So I thought this script was pretty straight forward:
<a id="BackButtonlnk" href="#" class="white" onClick="history.go(-1)"></a>
When I click it it briefly shows the previous page but just looks like it refreshes
and you never end up at the previous page.

Try adding "; return false" to your onclick.
I think what's happening is the onclick fires (trying to go to the previous page), and then the browser tries to go to "(current page)#" (note the "#"), and essentially refreshes the original page. Thus, it appears that it's going back and forth - because it is.
<a id="BackButtonlnk" href="#" class="white" onClick="history.go(-1); return false;"></a>

Try using the href instead of the onclick event:
<a id="BackButtonlnk" class="white" href="javascript:history.go(-1);">Go Back</a>

In Javascript has many forms.
<a id="BackButtonlnk" class="white" href="javascript:history.back(-1);">Go Back</a>
If you wanna do that you write, recomend
<a id="BackButtonlnk" class="white" href="javascript:history.go(-1);"></a>