Cerrar Activar clic exterior

Todavía soy bastante nuevo en javascript y JQuery... ¿Cómo hago para que este div se cierre haciendo clic fuera del área de alternancia (no quiero que el usuario tenga que usar un botón de cierre)

el código se ve así:

 function toggleDiv(divId) {
 $("#"+divId).toggle();
 }

 function showonlyone(thechosenone) {
 $('.newnote').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
 }

y el html se ve así

<div class="note">

     <a id="myHeader1" href="javascript:showonlyone('newnote1');" >
          <img src="images/SN_NotesPage_14.png">
     </a>      

     <div class="newnote" id="newnote1">
          <a>
               <img src="images/SN_NotesPage_16.png">
          </a>
     </div>
</div>

gracias

preguntado el 31 de julio de 12 a las 15:07

1 Respuestas

Lo que suelo hacer es agregar un detector de eventos de clic al cuerpo del documento que cierra la superposición. Para evitar cerrar la superposición al hacer clic en ella, agrego un segundo detector de eventos de clic a la superposición que contiene ev.stopPropagation();

Así que con jQuery se vería así:

$(document.body).bind('click.closeNote', function() {
    $('.newnote').hide();
});
$('.newnote').bind('click.closeNote', function(ev) {
    ev.stopPropagation();
});

Otra forma es agregar un div transparente (con un zIndex más bajo que la nota) que cubre toda la página. Luego, puede agregar un detector de eventos de clic a este div que cierra la nota.

Editar: tenga en cuenta que el ejemplo anterior no es muy eficaz ya que ejecuta un selector en cada clic. Simplemente vincule este evento cuando se muestre una nota y desvincúlelo cuando se cierren.

Respondido 31 Jul 12, 15:07

Gracias, excelente solución: el div también se cierra cuando hago clic en él. Es posible que me haya perdido algo en ev.stopPropagation() - David

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.