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>

Show/hide multiple partial views on same page

I have a dashboard kind of page where on the left you would have menu items like:
link 1
link 2
link 3
Each of them going to a different action in the same controller.
I would like to have each action render it's data in the same page (in partial views) but I have no idea what the "best" way of doing this would be.
So lets say link 1 is rendering a list of people (table), link 2 statistics (charts) and list 3 some configuration properties.
How should I define this so that on each click, the main frame (which is the menu bar on the left containing the link 1-2-3 and is defined in a shared view) stays but only the middle content (partial views) would change, keeping in mind that link 1 is a table, link 2 charts and other controls and link 3 a bunch of controls (textboxes, drop down's and so on).
Should I show/hide div's on each click? This seems/feels kind of dirty to me?
All input/suggestions are very welcome!
EDIT:
This is the behavior I want (accepted answer): Show/Hide Multiple Divs with Jquery
Note: I am using C# in an ASP.NET MVC project and I would prefer a C# ASP.NET MVC solution (Javascript if needed), not other script/coding languages or frameworks.

You could add an onClick Handler on a Link:
<a onClick="handleLink1()">Link1</a>
Assuming the Rigth side locks like this:
<div id = "renderArea">
</div>
With that you could write the handleLink1() Functio nas follows:
function handleLink1(){
//Here you asign the new HTML:
Document.getElementById("renderArea").innerHTML = "<div/>";
}
Now you can write an Function for every Link and rerender the Rigth Part as you wish.

You should use ether PHP or Java for this kind of Setup.
Alternativly you could use an JS Framework like Angular or React, they can Handle it as well.
For Plain JS you can alsways use an Event (The Links gets clicked) to change the Page as you wish.

For now I have implemented this answer: Show/Hide Multiple Divs with Jquery since the other ones are not in my direct knowledge to implement them
Code sample:
jQuery(function() {
jQuery('#showall').click(function() {
jQuery('.targetDiv').show();
});
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
http://jsfiddle.net/XwN2L/
I am still open to other suggestions, specially if they involve Partial views and not to much of other things.
Thank you all so far!

How Can I Use Dynamic Angualar Variable as Id for Showing Modal with Dynamic Content?

Actually My Aim is to Activate Modal Popup in ng-repeat with Dynamic ID
Code Follows :-
<div class="mpopup" id="{{obj.displayName}}"> <!-- id="{{obj.displayName}}" which i need to use as dynamic id in Below OnClick -->
<div mypopupcontent></div> <!-- My Custom Directive which Shows the Model Dynamic Content -->
</div>
<!-- Button with Jquery OnCLick -->
<button onclick="jQuery('#objdisplayName').modal('show');"> <i class="fa icon "></i> Show Popup</button>
Iam Having 'X' number of different objects to display in 'X' different popup but the Dynamic angular Id Syntax({{obj.displayName}}) is not being accepted by Jquery
Please give me an Idea about this Problem ..
Thanks for the Help in Advance !!

How to make an element stop triggering ngAnimate?

I'm making a content slider for my project but I have very little expirience in AngularJS.
I've found this plunker which suits my needs greatly. You can see my live page here. It is in russian language, but I hope it wont be a problem. Slider is in the middle of the page - a section with 8 cards.
So the problem is:
Slider is controlled by the arrows below it. Still if you click on the red button inside the card it will update the model and classes ng-enter and ng-leave will be applied to the parent container which will result in slider animation. Well, the problem becomes obvious if you just click these red buttons.
Is there any way to make these red buttons not apply ng-enter and ng-leave classes to the container div?
UPDATE: Here is a plunker, that illustrates my problem. The animation must happen when you click on Prev and Next buttons. But it happens when you click on "Choose" or "Choosen" links, which updates the model.
This is a markup
<body ng-controller="MainCtrl">
<div class="page-container">
<div class="gift-page" ng-class="direction" ng-repeat="page in gifts | partition: 6 | offset: currentPage | limitTo: 1">
<ul class="gift-list clearfix">
<li class="gift" ng-repeat="gift in page">
<div class="gift-item">
<div class="gift-details">
<h3>{{gift.title}}</h3>
<span class="points">{{gift.points}} points</span>
Choose
Chosen
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="controls">
<button ng-click="prev()">Prev</button>
<button ng-click="next()">Next</button>
</div>
</body>

Quick, but not the best solution is to turn off animation before action and turn on after:
$scope.addToBasket = function(gift){
$animate.enabled(false);
gift.ordered = true;
$timeout(function(){
$animate.enabled(true);
})
}
Here is plunk.
Will look for better solution later))

Can try adding $event.stopPropagation(); to the ng-click event, in your case:
Выбрать

What is the right solution if I need lots of id and classes when creating a Jquery popup box?

Well, In my website admin panel I've users.php page where I've to send more request to server using Jquery/Ajax. when I send this request to server I need to show pop up box for e.g. edit user details, resend confirmation password, send login details, etc.... using jQuery Modals (You can see the popup plugin here..http://zurb.com/playground/reveal-modal-plugin)
So following is the popup box code:
Here i use $i. It's means it increment the $i = 0 / 1/ 2 and so one.... base on sql query result..So the Id is ok for now but here I need different class'es like reveal-modal1, reveal-modal2, reveal-modal3 and so on based on sql query result. So my question, is it now require to create more class'es in the style sheet base on sql result or Is there any solution which just need only one class or id ?
<div id="myModal<?php echo $i; ?>" class="reveal-modal3" style="width:90%; margin:a auto;
color:#FFF; visibility: hidden;">
// my popup data....
</div>
Note: Now I'm using. reveal-modal3, reveal-modal4 etc..in my css style sheet but I think that is not right way to do this. Can anyone help me with this ?

Anything wrong with class="reveal-modal reveal-modal1", thereby allowing you to have individual classes per ID while still having a single, static reveal-modal class that applies to all of them? ;)
Generally speaking, class attributes should always be static, there should not be an incrementing number on the end...

<a href="#" class="big-link" data-reveal-id="myModal1">
Popup 1
</a>
<a href="#" class="big-link" data-reveal-id="myModal2">
Popup 2
</a>
<a href="#" class="big-link" data-reveal-id="myModal3">
Popup 3
</a>
<div id="myModal1" class="reveal-modal">
<h1>Reveal Modal Goodness -1</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal2" class="reveal-modal">
<h1>Reveal Modal Goodness -2</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal3" class="reveal-modal">
<h1>Reveal Modal Goodness -3</h1>
<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
<a class="close-reveal-modal">×</a>
</div>
Class would be common for all popup box. You need to keep unique id for individual popup that can be increase