web-dev-qa-db-fra.com

Masquer une div quand sur la clique dessus

Cette question a été posée à plusieurs reprises, mais aucune des réponses ne semble fonctionner pour moi.

Le css de la div est comme suit:

#info{
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);
}

J'ai essayé d'utiliser le code suivant:

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

$(document).click(function(){
  $("#info").hide();
});

ainsi que ce code:

$(document).mouseup(function (e){
    var container = $("#info");

    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Pourtant, chaque fois que je clique sur le div, celui-ci disparaît également.
Quelque chose d'autre qui pourrait fonctionner? 

jqueryhtmlonclickhide
17
Gooey

Comme votre cible a id=info, vous pouvez donc essayer:

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

  // check that your clicked
  // element has no id=info

  if( e.target.id != 'info') {
    $("#info").hide();
  }
});

Vous pouvez aussi essayer:

$(document).click(function() {

  if( this.id != 'info') {
    $("#info").hide();
  }

});

Selon commentaire

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

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) {
        $("#info").hide();
    }
});
31
thecodeparadox

Attachez un gestionnaire d'événements onclick à l'objet document:

$(document).click(function(e) {   
    if(e.target.id != 'info') {
        $("#info").hide();   
    } 
});

Démo: http://jsfiddle.net/aUjRG/

Voici une solution en JavaScript pur pour vous aider à mieux comprendre ce qui se passe:

function hideInfo(){
    if(window.event.srcElement.id != 'info'){
        document.getElementById('info').style.display = 'none';
    }
}

document.onclick = hideInfo;

Démo: http://jsfiddle.net/mmzc8/

Les deux solutions vérifieront si l'emplacement sur lequel l'utilisateur a cliqué était sur l'élément avec un ID de info. En supposant que l'utilisateur n'ait pas cliqué sur l'élément info, masquez l'élément info.

4
RobB

Essayez ce code, c'est le meilleur pour moi.

jQuery('.button_show_container').click(function(e) {
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
});

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});
3
Ken Avila

Pour que votre solution fonctionne également sur les iPad, vous devez utiliser le déclencheur de fonction suivant:

$(document).on("mousedown touchstart",function(e){
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) {
    $info.hide();
  }
});

De même, si vous cherchez à couvrir la souris, ajoutez 'touchend':

$(document).on("mouseup touchend",function(e){
  ...
});
3
Andy Lorenz

Vous pouvez ajouter une classe uniquement pour vérifier si vous cliquez sur cette div spécifique ou sur un élément de cette div sur lequel vous avez cliqué ou non. 

$(document).click(function(e){            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) {
            //...code if clicked out side div
    }
});
0
Ahmad.Iftikhar