javascript - 不使用关闭按钮隐藏模态窗口

Question

我有一个图片库。单击任何图像都会打开一个模式窗口，其中包含单击的图像。我想隐藏模态窗口。我知道如何通过关闭按钮来做到这一点。但我不想添加任何关闭按钮。我想做的是每当用户点击除以下任何地方以外的 div gallery-image gallery-control-previous gallery-control-next模态窗口应该被隐藏。

谁能建议我如何实现这一目标。

这是我的 jsFiddle

Answer 1

Demo

点击导航键以外的按钮时隐藏

$('.gallery-overlay').click(function(event){
    if($(event.target).hasClass('gallery-control') ==false){
        $(this).hide();
    }
});

点击image和navigation keys以外的按钮时隐藏

$('.gallery-overlay').click(function(event){
    if($(event.target).hasClass('gallery-control') ==false && $(event.target).hasClass('gallery-image') == false){
        $(this).hide();
    }
});

你可以使用 fadeout('slow') 而不是 hide 以获得良好的效果