Question

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

我正在尝试在网页上产生特定的效果，我正在努力寻找一些基本的JS，我可以修改/调整以完成我需要的工作。

我将在网页上放置一组10个图像，分为两行，每行5个。每张图片都有一个名称＆＃39;在它之上，以及一个＆＃39;职位名称＆＃39;在它下面。当点击图像时，我希望在所有图像的顶部显示（相关的）隐藏div，即左上角与第一图像的左上角匹配。 div将是预先设定的宽度。

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

所以，我想要制作的代码是可扩展的代码 - 即理论上，只要我得到正确的结构，当你点击图像时它不应该有多少图像，它显示＆＃39;正确隐藏的div。

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

任何建议/指向片段/指针的链接都将不胜感激！

Answer 1

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

Answer 2

使用jQuery和jQueryUI非常简单。

为简洁起见，我在这里只包含了5张图片http://jsfiddle.net/8kefF/2/

HTML：

<div>
    <div class="clickThisPicture" data-content-id="1">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="2">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="3">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="4">
        <img src="http://placehold.it/350x150" />
    </div>
    <div class="clickThisPicture" data-content-id="5">
        <img src="http://placehold.it/350x150" />
    </div>
</div>
<div class="hiddenContent" data-content-id="1">Hidden content 1</div>
<div class="hiddenContent" data-content-id="2">Hidden content 2</div>
<div class="hiddenContent" data-content-id="3">Hidden content 3</div>
<div class="hiddenContent" data-content-id="4">Hidden content 4</div>
<div class="hiddenContent" data-content-id="5">Hidden content 5</div>

CSS：

.hiddenContent {
    display:none;
}
.clickThisPicture {
    float:left;
    border:1px solid #000;
}

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叠加层的Javascript

2 个答案: