Используйте jQuery, чтобы скрыть DIV, когда пользователь нажимает за его пределами - PullRequest
Новая
       63

Используйте jQuery, чтобы скрыть DIV, когда пользователь нажимает за его пределами

918 голосов
/ 10 сентября 2009

Я использую этот код: 

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

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

И этот HTML: 

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

Проблема в том, что у меня есть ссылки внутри DIV и когда они больше не работают при нажатии.

Ответы [ 35 ]

2 голосов
/ 19 июля 2013 
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p - имя элемента. Где также можно передать идентификатор, имя класса или элемента.

2 голосов
/ 14 мая 2013

Если у вас проблемы с ios, mouseup не работает на устройстве Apple.

работает ли на ipad mousedown / mouseup в jquery?

Я использую это: 

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });
2 голосов
/ 11 ноября 2014

(просто добавив к ответу prc322.)

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

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

Это связано с тем, что некоторые ссылки на моем сайте добавляют новый контент на страницу. Если этот новый контент добавляется одновременно с исчезновением навигационного меню, это может дезориентировать пользователя.

1 голос
/ 29 января 2015 

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

});

FIDDLE

1 голос
/ 25 декабря 2013 
dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});
1 голос
/ 22 апреля 2014 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
1 голос
/ 19 ноября 2013

Я сделал это так: 

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});
1 голос
/ 28 апреля 2018

Так много ответов, должно быть, это право прохода, чтобы добавить один ... Я не вижу текущих (jQuery 3.1.1) ответов - так: 

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});
1 голос
/ 11 сентября 2015

С помощью этого кода вы можете скрыть столько элементов, сколько хотите 

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})
0 голосов
/ 31 мая 2019

Это решение должно работать нормально, это просто: 

jQuery(document).ready(function($) {
    jQuery(document).click(function(event) {
        if(typeof  jQuery(event.target).attr("class") != "undefined") {
            var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
            var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
            if (arresult < 0) {
                jQuery(".popup").hide();
            }
        }
    });
});

В приведенном выше коде изменения donotcountmeforclickclass1, donotcountmeforclickclass2 и т. Д. С классами, которые вы использовали для показа всплывающих окон, или щелчок во всплывающем окне, не должны действовать, поэтому вам обязательно нужно добавить класс, который вы используете для открытия всплывающих окон.

Изменить класс .popup с помощью всплывающего класса.

Страница:
...