通过单击div外部来隐藏jQuery

Hello,

I'm trying to make a JavaScript dynamic display of an image.

我正在尝试对图像进行JavaScript动态显示。

Here’s my code:

这是我的代码:

<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>

When someone clicks on "info_image" (that's the small picture) it opens the "info_image_click" (that's the large picture). I don't know how users can hide the "info_image_click" by clicking outside container in which he is. Sorry about my english :)

当有人点击“info_image”(这是小图片)时,它会打开“info_image_click”(这就是大图)。我不知道用户如何通过点击他所在的外部容器来隐藏“info_image_click”。抱歉我的英文:)

5 个解决方案

#1

Try this:

$('.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();
});

#2

try using

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

#3

Add body click:

添加正文点击:

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

#4

If possible try to change your DOM,then there is no need of jQuery also

如果可能的话尝试更改你的DOM,那么也不需要jQuery

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

#5

If what you are trying to do is to get your image to be modal (i.e. the page below is inactive until the image is hidden), you can create an invisible overlay (with a very small opacity, typically 0.01) that is the same size of your page, and covers it, and has a z-index (a "vertical" position) between that of your page (which would typically be 0), and that of your "modal" zone (i.e. in this case the info_image_click image), which can be anything larger than 0.

如果您要做的是将图像设置为模态(即下面的页面在图像被隐藏之前处于非活动状态),您可以创建一个不可见的叠加层(具有非常小的不透明度,通常为0.01),其大小相同您的页面,并覆盖它,并在您的页面(通常为0)与您的“模态”区域之间具有z-index(“垂直”位置)(即在此情况下为info_image_click图像) ),可以是大于0的任何东西。

Then you set the overlay click event so the image and the overlay get hidden when the overlay gets clicked.

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

By doing this, you ensure that when a user clicks on the window, if its inside the image, nothing happens (since the image has a higher z-index it will get the click event, which is not assigned), and if its outside the image, the overlay (and not the page, since it has a lower z-index) will get the click event and do what you want (hide the image and the overlay, thus returning to the main page).

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

You can put the overlay to a higher opacity than 0.01 if you want it to be a clue to the user that the image is modal.

您可以将叠加层设置为高于0.01的不透明度,如果您希望它为用户提供图像模态的线索。

Quick draft of how I would do it in jQuery:

我将如何在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 classes:

#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;
}

#1