web-dev-qa-db-fra.com

Comment masquer un élément DIV lorsque je clique à l'extérieur

J'ai un div et je veux le cacher lorsque je clique à l'extérieur. Mon code est:

<div id="mydiv">The div must be above button</div>

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

    $(document).click(function() {
        $('#mydiv').fadeOut(300);
    });

Mais ça ne marche pas pour moi ...

UPDATE

Le code complet est présenté ci-dessous. Lorsque je clique sur un bouton, il affiche une div ci-dessus, donc je dois cacher cette div lorsque je clique à l'extérieur.

D&EACUTE;MO

<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left - 40,
    "top":  pos.top - div.height() - 10
  });
});

$('#myDiv').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#mydiv').fadeOut(300);
});
jqueryhtmlhide
12
andys

En javascript click est un événement bouillonnant , il commence sur un div et monte vers un document . Lorsque vous arrêtez une propagation d'événement à l'aide d'une fonction stopPropagation(), un clic sur le document n'est pas géré. Donc, pour résoudre votre problème, supprimez simplement e.stopPropagation().

DEMO 1

Le meilleur moyen est:

$('#mydiv').click(function(e) {
    e.stopPropagation();
    $(this).fadeOut(300);
});

DEMO 2

Si je clique sur cette div, comment faire pour cliquer à l'extérieur et masquer cette div ?

Ok, imaginons que lorsque vous cliquez sur un conteneur avec l'id "wrapperId", "myDiv" devrait être caché:

$("#wrapperId").click(function(e){
  $('#mydiv').fadeOut(300);
})

si le conteneur est un document, vous pouvez utiliser $(document) au lieu de $("#wrapperId").

DEMO 3

Cela ne fonctionne pas regardez ce qui se passe: jsbin.com/ilowij/7

Vous devez arrêter la propagation d'un événement de clic lorsque vous cliquez sur le bouton. Apportez ces modifications:

$("#but button").click(function(e){
    e.stopPropagation();
    ...
}

DEMO 4

12
Warlock

Essayez avec le code ci-dessous qui vérifie la cible de l'événement

 $(document).click(function(e) {
  if(e.target.id!="mydiv"){  // if click is not in 'mydiv'
    $('#mydiv').hide(3000);
  }
});
8
prakash2089

Mieux que de lier l'événement click au document, vous pouvez utiliser ce type d'extrait:

VOIR LA DÉMO

$('#mydiv').click(function(e) {
        e.stopPropagation();
    })
    .css({outline:0})
    .focusout(function(){
         $(this).fadeOut(300);  
    }).focus();
2
A. Wolff

Essayez la solution ci-dessous qui est facile et qui fonctionne même récursive:

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

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
1
Sam G

vérifier celui-ci

<a href="#" id="link">Click me</a>

    (function($) {

  $("#link").click(function(e){
    e.stopPropagation();
    var div = $("#show_hide");

    // Make it visible off-page
    div.css({
      "display": "block"
    });

  });
$(document).click(function(e){
  $('#show_hide').fadeOut(300);
});
})(jQuery);

vous pouvez commander ce lien par exemple ..

vérifier ceci http://jsfiddle.net/x5Env/

0
saadk

Le moyen le plus simple consiste à capturer l'événement onclick du document. Vous savez que cet événement de clic se produit en dehors de l'élément qui vous intéresse, puis renvoie simplement false. J'ai utilisé cette astuce pour masquer un menu contextuel lorsqu'un clic se déclenche en dehors du menu.

0
Zac Zeng

Pourquoi tout cela n'utilise que la cible CSS3

<a href='#login'>Login</a>


<div id='login'>
  blah blah blah
</div>


css:

#login{width:400px;height:600px;background:#fff;margin:10%
       auto;position:absolute;left:0;right:0;
      }

now we will hide the login box by putting a class on it 

<div class='lightbox' id='login'>

</div>

css:

.lightbox{display:none;}
.lightbox:target{display:block;}

thats tout le code ne doit pas trop utiliser javascript

0
codecare.nl

$('html').click(function() {$("div").css({"display": "none"});});$('.option').click(function(event){event.stopPropagation();});

$(".search").keyup(function(){search=$(".search");if(search.val()!= "" ){$("div").css({"display": "block"});}else{. $("div").css({"display": "none"});}});

  <input type="search" class="form-control search" name="search" autocomplete="off" >

  <div>

  </div>

cela aidera à cacher

0
Jerin Stephen