jquery popup div onclick example

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; 
        }
    }
}); 

High quality PSD seals for next project

High quality PSD seals for next project

6 PSD Seal badges to display your special offers in six different color themes , deal or the discount in a special way in you next design with a nice font style, Photoshop layer styles have used to design these seals. And the file is is separate layer format so easy to use like drag and drop.

 

High quality PSD seals for next project
High quality PSD seals for next project

 Download Link