通过点击div外部的jQuery隐藏

我正在尝试进行图像的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” （这是大图）。我不知道用户如何通过单击他所在的外部容器来隐藏“info_image_click”。对不起我的英语:)

来源

2013-04-23 Pavo Gabrić

它的jQuery您使用打开图像？显示更多代码的链接。 – 2013-04-23 08:45:51

试试这个：

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

来源

2013-04-23 08:47:56

非常感谢，我仍然是本节中的新手。 – 2013-04-23 08:58:02

很高兴帮助！不要担心成为'菜鸟'，因为所有的专家都是'菜鸟'一次:) – 2013-04-23 09:01:34

另一个问题:)图像是在身体标记，但我不能居中，所以它可能总是在中心这是我在css中的body line：body { \t background-image：url（“slike/noisy_net.png”）; \t background-repeat：repeat; } – 2013-04-23 09:21:52

尝试使用

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

来源

2013-04-23 08:45:56 Dimser

补充身体点击：

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

来源

2013-04-23 08:46:42

如果可能试图改变自己的DOM，则没有必要jQuery也

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

来源

2013-04-23 08:48:17

如果你想要做的是让你的图像是模态的（即，下面的页面是隐藏的，直到图像被隐藏），你可以创建一个不可见的覆盖层（具有非常小的不透明度，通常为0.01），它与您的页面大小相同并且覆盖它，并且具有z-索引（“垂直“位置）和你的”模态“区域（即本例中为info_image_click图像）之间的垂直位置），它可以是大于0的任何值。

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

通过这样做，您可以确保当用户单击窗口时，如果它在图像内部，则什么都不会发生（因为图像具有更高的z-index，它将得到未分配的单击事件），并且如果它在图像外部，覆盖（而不是页面，因为它具有较低的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(); 
}

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

来源

2013-04-23 08:54:08

通过点击div外部的jQuery隐藏

回答

相关问题