Javascript在单击关闭按钮时显示隐藏的div覆盖

我需要一点帮助——我不是一个优秀的程序员，通常可以通过谷歌搜索找到问题的答案，但这次不行

我正试图在网页上产生一种特定的效果，并且正在努力寻找一些基本的JS，我可以修改/调整以满足我的需要

我将在一个网页上放置一个由10幅图像组成的面板，分为两行五幅。每张图片上方有一个“姓名”，下方有一个“职务”。单击图像时，我希望（相关）隐藏div显示在所有图像的顶部，即左上角与第一个图像的左上角匹配。div将是预设的宽度

在每个div的上角，我想要一个简单的关闭按钮

所以，我试图产生的代码是可伸缩的——也就是说，理论上，只要结构正确，不管有多少图像，当你点击图像时，它“显示”正确的隐藏div

我们已经将jQuery加载到网页上，所以使用它不会有问题

---

如果您有任何关于代码片段/指针的建议/链接，我们将不胜感激

如果我理解正确，这个jQuery插件将帮助您：

这是通过jQuery和jQueryUI非常简单地实现的

为了简洁起见，我这里只包括了5张图片

HTML:

Javascript:

$(document).ready(function () {
    $('.clickThisPicture').on('click', function (event) {
        var contentId = $(this).data('content-id');
        $(".hiddenContent[data-content-id='" + contentId + "']").dialog({
            modal: true,
            resizable: false,
            draggable: false,
            closeOnEscape: false,
            dialogClass: "no-close",
            buttons: {
                "Close": function () {
                    $(this).dialog("destroy");
                }
            }
        });
    });
});

---

编辑：我更新了代码以隐藏默认的

close

按钮，以便在每次OP请求可伸缩性时销毁元素，因此DOM中可能有100/1000个额外元素会导致内存问题。最终。

那么您希望在单击图像时在所有图像上显示div吗。。？那些div中的内容是什么。。？他们都一样吗。。？这些图像当前的html结构和css是什么？@TJ可以修改结构以适应-我设想的是图像显示的内容，隐藏的div保持隐藏，直到单击图像。隐藏的div每个都包含一个关闭按钮。除了@Gino Pane的答案外，请看一下Thank@RobSchmuecker-这实际上对于我所需要的看起来有点复杂。我的覆盖不需要移动/交互的铃声和口哨。不过，这是一个非常有用的链接，因为我相信如果需要的话我可以做到。@JamesDavies，plainOverlay不仅仅用于动态覆盖，你可以在那里设置自己的，这就是为什么我建议它太完美了，谢谢@RobSchmuecker，我会用我自己的格式调整它。我已经开始玩这个了，并在这个测试页面上实现了它：我现在遇到的问题是设置对话框的样式，并将其放置在第一张图像的左上角（即，我希望它覆盖所有图像）。我假设这是在JavaScript中的某个地方设置的——我调用了jQuery和jQuery UI。如何更改对话框的外观？嗨，James，请查看传递到对话框的“选项”的

位置

参数。它需要一个坐标对，因此您必须确保获得第一幅图像的左上角坐标，例如

$（'.clickThisPicture:first'）。position（）或类似的。我真的很挣扎于这个位置，以及将它放入代码中的语法。如果我把单词position放在其他参数（如draggable等）的下面，它会阻止任何事情发生（尽管我可能弄错了！）。我试着输入代码以获得第一行的位置。单击此图片，然后用它在新行中设置对话的位置，但同样无效。如果你今天有五分钟的时间看一看，那将是非常感谢的。嗨，詹姆斯，我在你的测试页面上看到你没有得到一个jqueryui的副本，它可以生成一个对话框，因此它给出了错误。我看到你昨天在和这个位置较量，但是你忘记了逗号，因此它背后的所有东西都不起作用！这里有一些其他的测试代码来帮助您完成所需的工作
.hiddenContent {
    display:none;
}
.clickThisPicture {
    float:left;
    border:1px solid #000;
}

$(document).ready(function () {
    $('.clickThisPicture').on('click', function (event) {
        var contentId = $(this).data('content-id');
        $(".hiddenContent[data-content-id='" + contentId + "']").dialog({
            modal: true,
            resizable: false,
            draggable: false,
            closeOnEscape: false,
            dialogClass: "no-close",
            buttons: {
                "Close": function () {
                    $(this).dialog("destroy");
                }
            }
        });
    });
});