使用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将设置为“可见”。另一个原因是-in我的眼睛是一个非常棘手的方式- Id 'blockModalPopupDiv‘的div覆盖整个浏览器窗口。如果单击此元素，将执行隐藏所有div的功能。您将没有机会在div元素之外单击。

那你能做什么？我想你只有三个选择：

1. 请作者提供一个机会，以增加您的要求。
2. 下载源代码并自己修改它。它是在标准Javascript中创建的。
3. 尝试使用另一个插件或改变你的概念。