Question

您好，

我正在尝试动态显示图片。

这是我的代码：

<div class="info_image_click" style="display: none;">
    <img src="slike/info_slika_click.jpg" />
</div><!--kraj info_image_click-->

<a href="javascript:void(null);">
    <div class="info_image" style="margin: 0px auto;">
        <img src="slike/info_slika.jpg"/>
    </div>
</a><!-- info slika -->

<script>
    $('.info_image').click(function () {
        $('.info_image_click').show();
    });
</script>

当有人点击“info_image”（这是小图片）时，会打开“info_image_click” （这是大图）。我不知道用户如何通过点击他所在的外部容器来隐藏“info_image_click”。抱歉我的英语：）

Answer 1

试试这个：

$('.info_image').click(function (e) {

    // Used to stop the event bubbling..
    e.stopPropagation()
    $('.info_image_click').show();
});

// Hide the "info_image_click" by clicking outside container
$(document).click(function () {
    $('.info_image_click').hide();
});

Answer 2

尝试使用

$(document).not('. info_image_click').click(function() {
    // Do your hiding stuff here.
});

Answer 3

添加身体点击：

<script>
 $('.info_image').click(function () {
            $('.info_image_click').show();
            $("body").click(function () {
                $("info_image_click').hide();
            });
        });
</script>

Answer 4

如果可能，请尝试更改DOM，然后也不需要jQuery

<a href="your large image"><img src="your small image"></a>

Answer 5

如果你要做的是让你的图像是模态的（即下面的页面在图像被隐藏之前是无效的），你可以创建一个不可见的叠加层（具有非常小的不透明度，通常为0.01），这是页面大小相同，并且覆盖它，并且页面之间（通常为0）的z-index（“垂直”位置）与“模态”区域的z-index（“垂直”位置）（即在这种情况下） info_image_click图像），可以是大于0的任何内容。

然后设置叠加点击事件，以便在点击叠加层时隐藏图像和叠加层。

通过这样做，您可以确保当用户点击窗口时，如果它在图像内部，则没有任何反应（因为图像具有更高的z-index，它将获得未分配的click事件），并且如果它在图像外部，则覆盖（而不是页面，因为它具有较低的z-index）将获得click事件并执行您想要的操作（隐藏图像和覆盖，从而返回到主页面）。 / p>

如果你想让叠加图像是模态的，那么你可以将叠加层设置为高于0.01的不透明度。

如何在jQuery中执行此操作的快速草稿：

showWindowModal: function(windowSelector) {
    $("<div></div>")
        .addClass("overlay")
        .appendTo($("#main"))
        .css({
            width: $("#main").outerWidth(),
            height: $("#main").outerheight()
        })
        .click(function() {
            $(windowSelector).remove();
            $("#main > div.overlay").remove();
        });
    $(windowSelector).addClass("modal").show();
}

css课程：

#main > div.overlay
{
    position: absolute;
    background: white;
    z-index: 100;
    opacity: 0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.modal
{
    z-index: 1000;
}

通过单击div外部来隐藏jQuery

5 个答案: