1

画像ギャラリーがあります。任意の画像をクリックすると、クリックした画像のモーダル ウィンドウが開きます。モーダルウィンドウを非表示にしたい。私は閉じるボタンを置くことでそれを行う方法を知っています。しかし、閉じるボタンを追加したくありません。私がやろうとしているのは、ユーザーが他の場所をクリックするたびに、div に続いgallery-image gallery-control-previous gallery-control-nextてモーダル ウィンドウが非表示になることです。

誰でもこれを達成する方法を提案できますか。

これが私のjsFiddleです

4

5 に答える 5

3

Demo

以外のクリックで非表示navigation keys 

$('.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 の代わりに使用できます

于 2013-07-29T16:06:02.083 に答える
1

コードに次を追加するだけです。

$('.gallery-overlay').click(function() {
    $(this).fadeOut('slow');
});

$('.gallery-image').click(function() {
    return false;
});

イベントが に伝搬されないように、のハンドラreturn falseの最後にを追加する必要もあります。click.gallery-control-previous.gallery-control-next.gallery-image.gallery-overlay

フィドルを更新しました。

于 2013-07-29T15:58:08.990 に答える
0

onclickにクリック イベントを追加するだけfadeOut()です。.gallery-overlay

例については、JSFiddle を参照してください

次に、.gallery-captionboxandにイベント andを.gallery-image追加します。clickreturn false

// Hide the gallery on click
$('.gallery-overlay').click(function(){
    $(this).fadeOut();
});

// Return false on click of the caption box or the image itself
$('.gallery-captionbox, .gallery-image').click(function(){
    return false;
});

// All your other code below

JSFiddle を表示する

于 2013-07-29T16:05:08.023 に答える
-1

試す、

   $(ドキュメント).クリック(関数(e) {

       if( e.target.id != 'yourDivId') {
           $("#yourDivId").hide();
       }
   });
于 2013-07-29T16:01:28.573 に答える