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

Question

我目前正在建立一个网站，其中包含某些图片，点击时会打开一个可移动的弹出窗口，就像这里这样。

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

(下到底部点击(fire)按钮测试一下)

首页有代码和源文件

我将其设置为图像，而不是提交按钮。效果很好。

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

我正在尝试做的事情的详细示例

1. 点击图片一，显示红色图片，窗口可移动。
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");
        });
    });
});