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>
tshepang
  • 12,111
  • 21
  • 91
  • 136
Tessisamess
  • 15
  • 3

1 Answers1

0

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.
Reporter
  • 3,897
  • 5
  • 33
  • 47
  • Hmmm. Editing the source code would be a bit of a pain for both myself and another party, considering I'd need hand-holding, and I don't want to put someone through that, lmao. You wouldn't happen to know of any plugins that have options for multiple popups, would you? – Tessisamess Jul 05 '12 at 08:52
  • Actually it isn't a popup. It is just a layer. Yes I found a german site by accident. The people there suggesting using jquery and posted some examples. As far as I did understand used the animate function. do you want to get the link for it? – Reporter Jul 05 '12 at 09:10
  • That would be really helpful, yeah; thank you! I found a couple of sites, and I _think_ one of them might work for what I need to do, so I'm going to test it out, but a backup and more info is always good to have. Thanks again! – Tessisamess Jul 05 '12 at 09:16
  • If you don't mind, then accept my post as an answer or at least make an upvote (or downvote when it was not a useful answer). This site is an community that based on give and take (See FAQ). – Reporter Jul 05 '12 at 09:20
  • I'm aware of this, and I was intending to do just that. My apologies if I'm misreading, but it sounds like you're refusing to give me a link unless I upvote or accept the answer. – Tessisamess Jul 05 '12 at 09:25
  • http://codekicker.de/fragen/DIV-Layer-Einblenden-und-durch-Klick-ausblenden/222 is the link. – Reporter Jul 05 '12 at 09:31
  • Thank you very much! Unfortunately, it won't let me upvote; I need 15+ on my reputation, which I was unaware of. – Tessisamess Jul 05 '12 at 09:35