在Survey Dashboard中弹出图像

Question

我正在设置一个调查仪表板，希望能够点击图像在另一个窗口中打开。这是正常的，但如果我点击多个图像，我会打开许多​​不同的窗口。是否有办法使窗口关闭，当我点击新图像时会打开新窗口？

我可以在单独的新窗口中打开图像。

代码如下所示：

<a href="javascript:void(0)" onclick="$(this).next('div').clone().dialog({width:550,height:640});"><img src="image1.jpg" width="100" height="100" align="right"/></a><div style="display:none;"><img src="image1.jpg" style="max-width:500px;max-height:500px;"></img></div>

<a href="javascript:void(0)" onclick="$(this).next('div').clone().dialog({width:550,height:640});"><img src="image2.jpg" width="100" height="100" align="right"/></a><div style="display:none;"><img src="image2.jpg" style="max-width:500px;max-height:500px;"></img></div>

<a href="javascript:void(0)" onclick="$(this).next('div').clone().dialog({width:550,height:640});"><img src="image3.jpg" width="100" height="100" align="right"/></a><div style="display:none;"><img src="image3.jpg" style="max-width:500px;max-height:500px;"></img></div>

<a href="javascript:void(0)" onclick="$(this).next('div').clone().dialog({width:550,height:640});"><img src="image4.jpg" width="100" height="100" align="right"/></a><div style="display:none;"><img src="image4.jpg" style="max-width:500px;max-height:500px;"></img></div>

想要在打开新图像时关闭一个图像窗口，或者让新图像替换旧图像。

Answer 1

否。创建新窗口后，单击其他图像时无法关闭它。这是不可能的。

您可以在同一窗口中显示图像，而不是创建新窗口。

请尝试以下方法。

1. 模态图像https://www.w3schools.com/howto/howto_css_modal_images.asp
2. 灯箱https://www.w3schools.com/howto/howto_js_lightbox.asp
3. 图片库https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

Answer 2

所有对话框都有“ui-dialog-content”类，因此在打开新对话框之前选择并关闭它们。

$(".ui-dialog-content").dialog("close");

http://api.jqueryui.com/dialog/