Question

I wanted to show different divs as popup for different images on same page.
Bellow is my code.
Script

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"/>
<script>

function showdialog(linkName, linkClass) {
    //select all the a tag
    $(linkName).click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

        //transition effect     
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);

    });

    //if close button is clicked
    $('.' + linkClass + ' .close').click(function (e) {
        //Cancel the link behaviors
        e.preventDefault();

        $('#mask').hide();
        $('.' + linkClass).hide();
    });

    $(window).resize(function () {

        var box = $('.' + linkClass);

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top', winH / 2 - box.height() / 2);
        box.css('left', winW / 2 - box.width() / 2);

    });

}

  </script>

Style

        <style>
    #mask {
      position:absolute;
      left:0;
      top:0;
      z-index:9000;
      background-color:#ffffff;
      display:none;
    }

    .appDevClass,.productEngClass,.erpServClass,.testingClass,.portalMobClass,.legacyModClass {
      position:fixed;
      left:0;
      top:-100px;
      width:700px;
      height:auto;
      display:none;
      z-index:9999;
      padding:20px;
      box-shadow: 0 0 50px 10px #006357;
      border-radius: 12px;
    }

    #appDevLink,#productEngLink,#erpServLink,#testingLink,#portalMobLink,#legacyModLink {
      width:700px; 
      height:auto;
      padding:10px;
      background-color:#ffffff;
    }

    </style>

HTML

      <div>
           <div> <img src="servicePort.png" style="position:relative;left:260px;padding-bottom:20px;"/>
           </div>
           <div >
         <a href="#appDevLink" id="appDevLinkId" name="appDev" style="position:relative;left:370px;height:100%;">   <img  onclick="javascript:showdialog('#appDevLinkId','appDevClass')" src="appDev.png" id="appDevImg"/></a>
            </div>
            <div>
         <a href="#productEngLink" id="productEngLinkId" name="productEng" style="position:relative;left:150px; ">   <img onclick="javascript:showdialog('#productEngLinkId','productEngClass')" src="productEng.png" id="productEngImg"/></a>
         <a href="#erpServLink" id="erpServLinkId" name="erpServ" style="position:relative;left:370px;">   <img onclick="javascript:showdialog('#erpServLinkId','erpServClass')" src="erpServ.png" id="erpServImg"/></a>
            </div>
            <div>
         <a href="#testingLink" id="testingLinkId" name="testing" style="position:relative;left:150px;">   <img onclick="javascript:showdialog('#testingLinkId','testingClass')" src="testing.png" id="testingImg"/></a>
         <a href="#portalMobLink" id="portalMobLinkId" name="portalMob" style="position:relative;left:370px;">   <img onclick="javascript:showdialog('#portalMobLinkId','portalMobClass')" src="portalMob.png"  id="portalMobImg"/></a>
            </div>
            <div>
         <a href="#legacyModLink" id="legacyModLinkId" name="legacyMod"  style="position:relative;left:370px;">   <img onclick="javascript:showdialog('#legacyModLinkId','legacyModClass')" src="legacyMod.png" id="legacyModImg"/></a>
            </div>
            <div>
            <img src="bottomline.png" style="position:relative;left:70px;padding-top:10px;"/>
            </div>
        </div> 

                <div  id="appDevLink" class="appDevClass">
            <a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
            <h3>abc </h3> 
            <p>
                some ocntent here 
            </p>
        </div>

            <div id="productEngLink" class="productEngClass">
             <a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
             <h3>abc </h3> 
            <p>
                some ocntent here 
            </p>
        </div>

            <div id="erpServLink" class="erpServClass">
             <a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
             <h3>abc </h3> 
            <p>
                some ocntent here 
            </p>
        </div>

            <div id="testingLink" class="testingClass">
             <a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
             <h3>abc </h3> 
            <p>
                some ocntent here 
            </p>
        </div>

            <div id="portalMobLink" class="portalMobClass">
             <a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>

            <h3>abc </h3> 
            <p>
                some ocntent here 
            </p>
        </div>

            <div id="legacyModLink" class="legacyModClass">
             <a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
            <h3>abc </h3> 
            <p>
                some ocntent here 
            </p>
        </div>

The problem is that it opens same div as popup for multiple time.
i.e. when i click on image for time then div opens one time .
if again i click on same image then div opens 2 times & this continues.

I dont know what problem is there with this script.
Can any one help me with this.

Answer 1

I solved it.
Just added bellow code at the end of click function

$(linkName).unbind('click');