jQuery: ¿Cerrar DIV haciendo clic en cualquier lugar aparte del DIV mismo?

Question

tengo un div que se desliza hacia abajo cuando se hace clic en un botón, y me gustaría deslizar hacia arriba el div cuando un usuario:

1. clics anwhere excepto dentro del DIV en sí
2. Haga clic en un botón de cierre en el div.

Actualmente lo tengo a una etapa en que, hace clic en un elemento con la clase .panel-tab - se desliza hacia abajo el panel con ID #panel ... haga clic en cualquier otro lugar que se desliza hacia arriba ....

Aquí está mi código hasta ahora para conseguir el DIV para abrir y cerrar:

<script type="text/javascript"> 
$(document).ready(function(){ 

$('.panel-tab').click(function(e) { 
    $("#panel").stop(true, true).slideToggle("slow"); 
    e.stopPropagation(); 
}); 

$("body").click(function() { 
    $("#panel:visible").stop(true, true).slideUp("slow"); 
});}); 
</script> 

Answer 1

Usted puede unirse a un evento de click a la document y comprobar si el evento click sucedió dentro de ese div o hijos. Si no, ciérralo.

Plugin time!

(function($){ 
    $.fn.outside = function(ename, cb){ 
     return this.each(function(){ 
      var $this = $(this), 
       self = this; 

      $(document).bind(ename, function tempo(e){ 
       if(e.target !== self && !$.contains(self, e.target)){ 
        cb.apply(self, [e]); 
        if(!self.parentNode) $(document.body).unbind(ename, tempo); 
       } 
      }); 
     }); 
    }; 
}(jQuery)); 

uso:

$('.panel-tab').outside('click', function() { 
    $('#panel').stop(true, true).slideUp('slow'); 
}); 

Answer 2

EDITARHow to create a custom modal popup - and how to close it clicking outside of it

---

Aquí, sólo un ejemplo de la mina: http://jsbin.com/uqiver/1/edit

$("body").on('click', function(ev) { 
    var myID = ev.target.id; 
    if (myID !== 'panel') { 
     $('#panel').hide(); 
    } 
}); 

O también se puede comprobar si es visible a simple vista:

var $pan = $('#panel'); 

$("body").on('click', function(ev) { 
    if ($pan.is(':visible') && ev.target.id !== 'panel') $pan.hide(); 
}); 

Answer 3

me gustaría hacer algo como esto

var $doc, $panel = $('.panel-tab'); 
$doc = $(document); 
$doc.bind("click", function(){ 
    $panel.hide(); 
    $doc.undbind("click"); 
}); 

$panel.bind("click", function(e){ 
    e.stopPropagation(); 
}); 

siempre cerrar la pestaña en el clic en el documento, pero detiene el evento desde la propagación en la pestaña en sí.

aquí un ejemplo de trabajo: http://jsfiddle.net/meo/TnG4E/