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

Can I use this code to show two different windows?

本文关键字：两个 窗口 代码 显示 我可以      更新时间：2023-09-26

我目前正在构建一个具有特定图像的网站，单击会打开一个可移动的弹出窗口，如下所示。

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

（向下到底部，点击（开火）按钮进行测试）

代码和源文件可在首页找到

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

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

我尝试做的详细示例

  1. 单击图像一，显示带有可移动窗口的红色图像
  2. 单击图像二，显示带有可移动窗口的蓝色图像

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

您可以将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');
    });
});

也可以在JS Fiddle上观看你的演示。​​

更新：

JS Fiddle 上的这个解决方案会更漂亮

因为您使用class选择了功能，并将打开的对话框保存在data-openid属性中。在开始这个例子之前，一定要理解第一个例子：）此外，你还必须了解一些关于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");
        });
    });
});
相关文章：