Question

我目前正在建立一个拥有某些图像的网站，点击后会在这里打开一个可移动的弹出窗口。

http://dhtmlpopups.webarticles.org/movable.php

（转到底部并单击（开火）按钮进行测试）

首页上提供了代码和源文件

我将其设置为图像，而不是提交按钮。这一直很有效。

现在，这是我的问题。我需要这个，当根据图像点击时，它会在弹出窗口中显示不同的图像。但是，当我复制代码并将其粘贴到同一页面的其他位置时，似乎无论我做什么它只显示第一个图像并且它不会改变任何东西。即使我更改了图像文件的链接。究竟出了什么问题？为什么我的第二个窗口没有变化并且与第一个窗口具有相同的图像？

我正在尝试做的详细示例

点击图像一，显示带可移动窗口的红色图像。
单击图像2并显示带可移动窗口的蓝色图像。

Answer 1

您向我们展示的链接非常陈旧。所以支持你的任务是愚蠢的，因为今天很多功能都是以其他方式处理的。

您可以jQuery使用jQueryUI来制作您想要的内容。您可以在那里观看演示，但通过制作这些可以轻松完成：

HTML

<div id="diag1"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div>
<div id="diag2"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div>
<img id="pic1" src="http://dummyimage.com/100&text=pic1">
<img id="pic2" src="http://dummyimage.com/100&text=pic2">

使用Javascript：

$().ready(function(){
    $("#diag1").dialog({ autoOpen: false });
    $("#diag2").dialog({ autoOpen: false });
    $("#pic1").click(function(){
        $("#diag1").dialog('open');
    });
    $("#pic2").click(function(){
        $("#diag2").dialog('open');
    });
});

另请注意your DEMO on JS Fiddle.

<强>更新

更美丽的是this solution on JS Fiddle

因为您选择了class的功能并将打开的对话框保存在data-openid属性中。在开始这个之前，请务必理解first example :)此外，您必须了解jQuery和CSS Selectors

的内容。

HTML：

<div id="diag1" class="diagc"><img src="http://dummyimage.com/100/ff0000/FFFFFF&text=red"></div>
<div id="diag2" class="diagc"><img src="http://dummyimage.com/100/0000ff/FFFFFF&text=blue"></div>
<div id="diag3" class="diagc"><img src="http://dummyimage.com/100/00ff00/FFFFFF&text=green"></div>
<img class="picdiag" src="http://dummyimage.com/100&text=pic1" data-openid="diag1">
<img class="picdiag" src="http://dummyimage.com/100&text=pic2" data-openid="diag2">
<img class="picdiag" src="http://dummyimage.com/100&text=pic3" data-openid="diag3">

使用Javascript：

$().ready(function(){
    $(".diagc").each(function(){
        $(this).dialog({ autoOpen: false });
    });
    $(".picdiag").each(function(){
        $(this).click(function(){
            $("#"+$(this).attr("data-openid")).dialog("open");
        });
    });
});

我可以使用此代码显示两个不同的窗口吗？

1 个答案: