Home/ Questions/Q 8189063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:09:05+00:00

I know this has probably been answered multiple times before, but this is the

  • 0

I know this has probably been answered multiple times before, but this is the second time I’ve worked with JQuery, and I’m not entirely sure what I need to do, since I’m not familiar with this format of coding. I’ve looked at other, similar, questions, but none of the answers are making sense to me, and I really need this to click in my head so I can keep working.

I’m using Jpopup for this, so the script info is all there, but my question is this:

I have two areas in an image that I need to be clickable, both showing different content, but I can only call one page at a time to pop up, and multiple anchor tags just give me the same content twice. What do I need to add to that script to allow the page to show two different popups?

This is the script in my HTML page

<script language="javascript">

  $(document).ready(function() {

    //Change these values to style your modal popup
    var source = "demo.html";
    var width = 920;
    var align = "center";
    var top = 100;
    var padding = 10;
    var backgroundColor = "#FFFFFF";
    var source = 'popups/demo.html';
    var borderColor = "#000000";
    var borderWeight = 4;
    var borderRadius = 5;
    var fadeOutTime = 300;
    var disableColor = "#666666";
    var disableOpacity = 40;
    var loadingImage = "popups/loading.gif";

    //This method initialises the modal popup
    $(".modal").click(function() {

        modalPopup( align,
            top,
            width,
            padding,
            disableColor,
            disableOpacity,
            backgroundColor,
            borderColor,
            borderWeight,
            borderRadius,
            fadeOutTime,
            source,
            loadingImage );

    }); 

    //This method hides the popup when the escape key is pressed
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            closePopup(fadeOutTime);
        }
    });

  });

</script>

The HTML

        <div style="margin-top:200px;margin-left:395px;">
        <a class="modal" href="javascript:void(0);"><img src="images/clickmelarge.png" border="0">
        </a></div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I studied the source code of the “plugin” and studied also the invoked source code of the HTML page at runtime. In my eyes this popup plugin doesn’t support multiple popups at same time. Why?

    Well, I used Firebug to exermine the source code at runtime and I saw only the same divs, added to the DOM tree by this. As far as I did understand when the DOM was complete loaded the author added the main divs to the DOM tree and set they all to ‘hide’. If you call your function these divs will set to ‘visible’.
    Another reason is -in my eyes a very tricky way- the div with the Id ‘blockModalPopupDiv’ covers the full browser window. If you click on this element, the function of hiding all divs will be executed. You won’t be have chance to click outside the div element.

    So what can you do?
    I think you have only three options :

    1. Ask the author for an opportuniti to add your requirement.
    2. Download the source code and modifiy it your self. Its created in standard Javascript.
    3. Try to use another plugin or change your concept.
    • 0