jQuery通过单击div外部隐藏

你好,

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

这是我的密码：

<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'）.show（）；
});

当有人点击“信息图像”（这是一个小图片）时，它会打开“信息图像点击” （这是大图）。 我不知道用户如何通过点击他所在的容器外部来隐藏“信息图像点击”。 对不起，我的英语：）

尝试使用

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

添加正文单击：

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

$（'.info_image'）。单击（函数（）{
$（'.info_image_click'）.show（）；
$（“正文”）。单击（函数（）{
$（“信息\图像\单击”）.hide（）；
});
});

试试这个：

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

---

如果可能，尝试更改您的

DOM

，那么也不需要

jQuery

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

---

如果您试图使图像成为模态（即，在图像隐藏之前，下面的页面处于非活动状态），则可以创建一个与页面大小相同的不可见覆盖层（不透明度非常小，通常为0.01），覆盖该覆盖层，并且在页面之间有一个z索引（“垂直”位置）（通常为0）和“模式”区域（即在本例中为信息图像单击图像）的值，可以是大于0的任何值

然后设置覆盖单击事件，以便在单击覆盖时隐藏图像和覆盖

通过这样做，您可以确保当用户单击窗口时，如果窗口位于图像内部，则不会发生任何事情（因为图像的z索引较高，因此它将获得未分配的单击事件），如果窗口位于图像外部，则覆盖层（而不是页面，因为其z索引较低）将获得单击事件并执行您想要的操作（隐藏图像和覆盖，从而返回主页）

如果想让用户知道图像是模态的，可以将覆盖设置为高于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();
}

---

您正在使用哪个jQuery打开图像？显示更多代码的链接。非常感谢，我仍然是这一部分的新手。很高兴它起到了作用！不要担心成为

新手，因为所有专家都是
新手
一次：）另一个问题：）图像位于body标记中，但我无法将其居中，因此它可能始终位于监视器的中心。这是我在css中的body行：{background image:url（“slike/noise_net.png”）；background repeat:repeat；}试试这个：
background image:url（slike/noise_net.png）；背景重复：不重复；背景位置：居中；
主体标记内：）这是我的主要背景，但我想居中的这张图片在我的第一个问题中，正是这张
#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;
}