3

Hello,

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

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

4

5 回答 5

6

尝试这个：

$('.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-23T08:47:56.690 回答
1

尝试使用

$(document).not('. info_image_click').click(function() {
    // Do your hiding stuff here.
});
于 2013-04-23T08:45:56.920 回答
1

添加正文点击：

<script>
 $('.info_image').click(function () {
            $('.info_image_click').show();
            $("body").click(function () {
                $("info_image_click').hide();
            });
        });
</script>
于 2013-04-23T08:46:42.613 回答
0

如果可能尝试改变你的DOM，那么没有必要jQuery也

<a href="your large image"><img src="your small image"></a>
于 2013-04-23T08:48:17.357 回答
0

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

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

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

如果您想让用户知道图像是模态的，您可以将叠加层设置为高于 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-23T08:54:08.473 回答