多个独特的弹出窗口，带有JPopUp脚本

Question

我知道这之前可能已经回答过很多次了，但这是我第二次使用 JQuery，我不完全确定我需要做什么，因为我不熟悉这种编码格式。我看过其他类似的问题，但没有一个答案对我来说有意义，我真的需要这个在我的脑海中点击，这样我才能继续工作。

我为此使用 Jpopup，所以脚本信息都在那里，但我的问题是这样的：

我在图像中有两个区域需要可点击，都显示不同的内容，但我一次只能调用一个页面来弹出，多个锚标签只是给我相同的内容两次。我需要向该脚本添加什么才能允许页面显示两个不同的弹出窗口？

这是我的 HTML 页面中的脚本

<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>

该目录

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

Answer 1

我研究了"插件"的源代码，并在运行时研究了 HTML 页面调用的源代码。在我看来，这个弹出插件不支持同时使用多个弹出窗口。为什么？

好吧，我使用 Firebug 在运行时执行源代码，我只看到相同的div，通过这个添加到 DOM 树中。据我所知，当 DOM 加载完成时，作者将主div 添加到 DOM 树中并将它们全部设置为"隐藏"。如果你调用你的函数，这些div将设置为"可见"。另一个原因是 - 在我看来是一个非常棘手的方式 - 带有Id"blockModalPopupDiv"的div覆盖了整个浏览器窗口。如果单击此元素，将执行隐藏所有div的功能。您将没有机会在div 元素外部单击。

那你能做什么呢？我认为您只有三个选择：

1. 请作者提供机会以添加您的要求。
2. 下载源代码并自行修改。它是用标准的Javascript创建的。
3. 尝试使用其他插件或更改您的概念。