Jquery popup div onclick example for multiple div on one single page.
here is the source code to repeat one, two , three or any number of divs to pop up on click action to work in single page without repeating any java script or query code. This code is free to use. This code will also include the fading effect to the pop up dialog box - which can be a hidden div tag on your web page.jQuery(function($) {
var $input;
$("[class^='topopup']").click(function() {
console.log('foo');
$input = jQuery(this).attr("class");
loading();
setTimeout(function(){
loadPopup($input);
}, 500); // .5 second
return false;
});
$("[class^='close']").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("[class^='close']").click(function() {
disablePopup();
});
$(this).keyup(function(event) {
if (event.which == 27) {
disablePopup();
}
});
$("div#backgroundPopup").click(function() {
disablePopup();
});
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0;
function loadPopup($name) {
console.log($name);
if(popupStatus == 0) {
closeloading();
$("#"+$name.substring(0,2)+"P"+$name.substr(3,$name.length-1)).fadeIn(0500);
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1;
}
}
function disablePopup() {
if(popupStatus == 1) {
$("#"+$input.substring(0,2)+"P"+$input.substr(3,$input.length-1)).fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0;
}
}
});
