JQuery: скрыть всплывающее окно, если щелчок обнаружен в другом месте

Ответ 1

Вы действительно можете немного упростить это:

// If an event gets to the body
$("body").click(function(){
  $(".popup").fadeOut().removeClass("active");
});

// Prevent events from getting pass .popup
$(".popup").click(function(e){
  e.stopPropagation();
});

Нажатие на всплывающее окно или любой из его дочерних элементов приведет к остановке распространения до того, как он достигнет тела.

Демонстрация остановки распространения события: http://jsbin.com/ofeso3/edit

Ответ 2

Я использую для этого простой код: -

$(document).click(function(e){

   if($(e.target).closest('#popupdivID').length != 0) return false;
   $('#popupdivID').hide();
});

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

Спасибо!!

Ответ 3

Нарисуйте свою логическую логику!:)

if(!$target.is(".popup") && !$target.parents().is(".popup"))

Ответ 4

Сделайте это:

$(document).click(function (e) {
    // show_alerts is the class of the link to display the popup
    if (!$(e.target).parents().andSelf().is('.show_alerts')) {
        // hide your popup
    }
});

example: http://jsfiddle.net/Acf3F/

Ответ 5

Здесь потенциальное решение для определенных ситуаций. Всплывающее окно должно иметь tabindex, чтобы это работало и не могло содержать никаких "настраиваемых" элементов внутри.

$('a').click(function() {
    $('.popup').show().focus();
});
$('.popup').blur(function() {
    $(this).hide();
});

http://jsfiddle.net/d6zw3/

Ответ 6

Мы используем это, чтобы отображать всплывающее окно по щелчку, а затем скрыть его, как только вы снова нажмете ту же кнопку или нажмете на нее.

function togglePopup(){
  var selector = '#popup',
    $popup = $(selector),
    callback = function(e) {
      if (!$(e.target).parents().andSelf().is(selector)) {
        $popup.hide();
        $(document).off('click', callback);
      }
    };

  $popup.toggle();
  if ($popup.is(':visible')) {
    $(document).on('click', callback);
  }
  return false;
}

Ответ 7

$("body").click(function(event ){
            var $target = $(event.target);
            if(!$target.parents().is(".popup") && !$target.is(".popup")){
                $("body").find(".popup").hide();
            }
        });

это решение для меня

Ответ 8

Как и в jQuery 1.7, есть обработчик on(), для меня работает следующее: предполагается, что видимое всплывающее окно содержит класс .activePopup:

$('body').on('click', ":not(.activePopup)", function(e){
  e.stopPropagation();
  //do your hiding stuff
});

Ответ 9

Вот фрагмент кода, который может помочь для структуры html

<script>
jQuery(document).click(function() {
        jQuery(".main-div-class .content").css("display","none");
    });

    jQuery(".main-div-class .content").click(function (e) {
        e.stopPropagation();
        //do redirect or any other action on the content
    });     
    jQuery(".main-div-class h4").click(function(e) {
        e.stopPropagation();
        jQuery(this).parent().find(".content").show();
    });
</script>
<div class="main-div-class">
<h4>click here</h4>
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div>
</div>

Ответ 10

поэтому обновленный код может выглядеть следующим образом

<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery(document).click(function() {
        jQuery(".main-div-class .content").css("display","none");
    });

    jQuery(".main-div-class .content").click(function (e) {
        e.stopPropagation();
        //do redirect or any other action on the content
    });     
    jQuery(".main-div-class h4").click(function(e) {
        e.stopPropagation();
        jQuery(this).parent().find(".content").show();
    });
});
</script>
<div class="main-div-class">
<h4>click here</h4>
<div class='content'>to show content here like this "<a href="http://stackoverflow.com/questions/2329816/jquery-hide-popup-if-click-detected-elsewhere#new-answer">Click</a>" or any other type of content</div>
</div>

Ответ 11

У меня были проблемы со всеми решениями здесь, поэтому после некоторого разочарования; Я подошел к проблеме в несколько другом направлении.

Мне особо не понравилось прикреплять события click к телу или документу, а event.target не был достаточно надежным. Я также не хотел использовать stopPropagation(), поскольку я не хотел вмешиваться в другие события.

Вот как я решил это, надеюсь, что это поможет:

Разметка

<div id="ModalBG"></div>
<div id="Modal">Content Here</div>

JavaScript

function showModal(){ $("#Modal, #ModalBG").show(); }

$("#ModalBG").click(function () { $("#Modal, #ModalBG").hide() });

CSS

#Modal{
    z-index: 99;
}


#ModalBG{
    opacity: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 98;
    display: none;
}

Ответ 12

Я сделал что-то вроде следующего. Надеюсь, это поможет кому-то

$('body').click(function(e) {
    $('className').click(function(){
         e.stopPropagation();
         $(this).data('clicked', true);
    })
if(!$('.className').data('clicked')){
    // do sth
 } else {
    // do sth else
 }
$('.className').data('clicked', false);