Collecting Variables from Links (classes) Setting them and resuing Functions
So I am extremely new to Jquery and implementing variables. I found this example of a popup window on Jfiddle that works perfectly for what I'm trying to accomplish. Though the functions are set up for a "Single" popup when I need a few Different popups. So where the code is using the .pop & .contact classes I would like to find a way to collect the information as to whats being clicked on like an onClick listener, put that in a variable for the functions to use. Any help or suggestions on going about it would be appreciated. I realize I can copy those functions repeatedly and recycle the close function, but reusing code repeatedly is just a terrible idea.
<style>
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
border:1px solid #999999;
cursor:default;
display:none;
position:absolute;
text-align:left;
width:624px;
height:515px;
z-index:50;
padding: 25px 10px 25px;
text-decoration:none;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
text-decoration:none;
}
</style>
<body>
<div class="messagepop pop">
<a href="#" class=""> Testing</a><br>
<a class="close" href="/">Close</a>
</div>
<div id="col1">
<a href="/contact" class="contact"><img src="image.png"></a>
</div>
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>