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>

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>

Answer 1

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

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

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

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

使用JPopUp脚本的多个独特的弹出窗口？

1 个答案: