Закройте div, нажав на кнопку

Я хочу скрыть 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>

Ответы

Ответ 1

Другой способ, который делает ваш jsfiddle менее багги (требуется двойной щелчок на открытии).

Это не использует делегированное событие для уровня тела

Установите tabindex="-1" в DIV.popup(и для стиля CSS outline:0)

DEMO

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

Ответ 2

Вам нужно

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});

Ответ 3

Я бы предложил использовать метод stopPropagation(), как показано в модифицированном скрипте:

Fiddle

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

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

Таким образом, вы можете скрыть всплывающее окно, когда вы нажимаете на тело, не добавляя лишнего, если, и когда вы нажимаете на всплывающее окно, событие не вылетает в тело, просматривая всплывающее окно.

Ответ 4

Вам лучше пойти с чем-то вроде этого. Просто дайте id div, который вы хотите скрыть, и сделайте такую функцию. вызовите эту функцию, добавив событие onclick в тело.

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}

Ответ 5

Добавить прозрачный фон, занимающий весь размер окна, перед вашим всплывающим div

.transparent-back{
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

Затем нажмите на свой клик, чтобы закрыть всплывающее окно.

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});

Ответ 6

На этот вопрос можно было ответить здесь. Могут быть некоторые потенциальные проблемы, когда прерывание распространения событий прерывается, как объяснил Филип Уолтон в этот пост.

Лучшим подходом/решением было бы создание пользовательского события jQuery, например. clickoutside. У Бен Альмана есть отличный пост (здесь), в котором объясняется, как реализовать его (а также объясняется, как работают специальные события), и он получил хороший (здесь).

Дополнительная информация о событиях jQuery событий и специальных событиях jQuery:

Ответ 7

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