25

閉じるリンクをクリックするか、その div の外側をクリックして、div を非表示にします。

次のコードを試しています。適切に閉じるリンクをクリックしてdivを開いたり閉じたりしますが、問題がある場合は、divの外側をクリックして閉じます。

$(".link").click(function() {
  $(".popup").fadeIn(300);
}

);
$('.close').click(function() {
  $(".popup").fadeOut(300);
}

);
$('body').click(function() {
  if (!$(this.target).is('.popup')) {
    $(".popup").hide();
  }
}

);
<div class="box">
  <a href="#" class="link">Open</a>
  <div class="popup">
    Hello world
    <a class="close" href="#">Close</a>
  </div>
</div>

デモ: http://jsfiddle.net/LxauG/

4

8 に答える 8

36

jsfiddle のバグを少なくする別の方法 (開くときにダブルクリックする必要があります)。

これは、ボディ レベルに委譲されたイベントを使用しません。

tabindex="-1"DIV .popup に設定 (およびスタイル CSS の場合outline:0)

デモ

$(".link").click(function(e){
    e.preventDefault();
    $(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
   $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
    $(this).fadeOut(300);
});
于 2013-07-31T09:08:18.427 に答える
28

あなたが必要

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});
于 2013-07-31T08:57:33.440 に答える
8

変更されたフィドルに示されているように、stopPropagation() メソッドを使用することをお勧めします。

フィドル

$('body').click(function() {
    $(".popup").hide();
});

$('.popup').click(function(e) {
    e.stopPropagation();
});

そうすれば、ボディをクリックしたときにポップアップを非表示にすることができます。追加の if を追加する必要はありません。また、ポップアップをクリックしたときに、イベントがポップアップを介してボディにバブルアップすることはありません。

于 2013-07-31T09:00:15.990 に答える
1

このようなもので行ったほうがよいでしょう。非表示にする div に id を指定して、このような関数を作成するだけです。body に onclick イベントを追加して、この関数を呼び出します。

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}
于 2015-03-06T04:19:43.723 に答える
0

この質問はここで回答されている可能性があります。Philip Walton がこの投稿で説明しているように、イベントの伝播が中断されると、潜在的な問題が発生する可能性があります。

より良いアプローチ/解決策は、カスタム jQuery イベント (clickoutside など) を作成することです。Ben Alman は、その実装方法 (および特別なイベントの仕組みについても説明) を説明する素晴らしい投稿 (ここ) を持っており、それをうまく実装しています (ここ)。

jQuery イベント API と jQuery の特別なイベントに関する詳細情報:

于 2015-10-19T09:59:57.427 に答える
-1 
 //for closeing the popover when user click outside it will close all popover 
 var hidePopover = function(element) {
        var elementScope = angular.element($(element).siblings('.popover')).scope().$parent;
        elementScope.isOpen = false;
        elementScope.$apply();
        //Remove the popover element from the DOM
        $(element).siblings('.popover').remove();
    };
 $(document).ready(function(){
 $('body').on('click', function (e) {
       $("a").each(function () {
                    //Only do this for all popovers other than the current one that cause this event
           if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
                && $(this).siblings('.popover').length !== 0 && $(this).siblings('.popover').has(e.target).length === 0)                  
                    {
                         hidePopover(this);
                    }
        });
    });
 });
于 2017-10-03T04:38:50.733 に答える