0

tengo un div modal que contiene un div contenedor:

<div id="modal_global" style="width:100vw;height:100vh;position:fixed;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;">
<div id="modal_contenedor" style="min-width:500px;background:white;padding:50px;border-radius:4px;text-align:center;">Hola soy un contenido</div>
</div>

lo que deseo es detectar cuando dan click dentro del div #modal_contenedor y cuando den click fuera del div #modal_contenedor es decir detectar el click en #modal_global

quiero para que cuando al dar click en #modal_global se desaparesca, sin embargo cuando den click en #modal_contenedor no pase nada (el mismo resultado que cuando abres una foto en facebook y das click en el fondo negro se cierra la ventana modal)

lo que intente:

$("html").click(function() {
    alert("Click!");
});
$('#modal_contenedor').click(function (e) {
    e.stopPropagation();
});

pero esto no me sirve ya que si pongo algun evento click en #modal_contenedor no me lo detecta por el e.stopPropagation(); y es muy deficiente estar escuchando todos los click en $("html");

de antemano gracias por la ayuda

0

2 respuestas 2

2

Si quieres que el Global desaparesca y el Contenedor se quede quieto puedes hacer lo siguiente, solo seleccionar el div global y no todo el HTML

$('#modal_global').click(function (e) {
  if (e.target !== this) {
    return;
  }
  alert('Soy el contenido Global!');
  $(this).fadeOut();
});

$('#modal_contenedor').click(function (e) {
  if (e.target !== this) {
    return;
  }
  alert('Soy el contenedor 01')
});

$('#modal_contenedor_cont').click(function (e) {
  if (e.target !== this) {
    return;
  }
  alert('Soy el contenedor 02')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="modal_global" style="width:100vw;height:100vh;position:fixed;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;">
<div id="modal_contenedor" style="min-width:300px;background:white;padding:50px;border-radius:4px;text-align:center;">Hola soy un contenido

<div id="modal_contenedor_cont" style="min-width:50px;background:white;padding:50px;border-radius:4px;text-align:center;background-color:red;">Hola soy un contenido 02</div>
</div>
</div>

Ahora como me comentastes si quieres que dentro del div contenedor se escuchen x clicks debes agegar la condicion e.target !== this a cada div o elemento con funcion click para que se escuche independientemente de los demas

4
  • el codigo funciona perfectamente salvo por un detalle, como tiene e.stopPropagation(); al poner un on.click a cualquier elemento dentro de contenedor no me lo detecta o mejor dicho anula el click debido al e.stopPropagation();
    – IntruzO
    Commented el 14 dic. 2020 a las 15:14
  • @IntruzO ya modifique mi codigo sin usar el e.stopPropagation(), en vez de eso, debes el e.target en cada click que haras para que se lea independientemente de otros clicks Commented el 14 dic. 2020 a las 15:31
  • me funciona perfectamente amigo, usé este codigo: $('body').on("click","#modal_global",function (e) { if (e.target !== this) {return;} $(this).remove(); }); $('body').on("click","#modal_contenedor",function (e) { if (e.target !== this) {return;} }); $('body').on("click","#modal_contenedor",function (e) { if (e.target !== this) {return;} }); ya que mi #modal_global es generado dinamicamente con jquery y si no le pongo $("body").on("click".... no me detecta el elemento #modal_global ni #modal_contenedor e notado tambien que no me detecta el click en #modal_contenedor
    – IntruzO
    Commented el 14 dic. 2020 a las 16:51
  • digo que no lo detecta porque no me sale el alert() pero esta bien porque cumple con su objetivo de cerrarse al dar click en #modal_global y de quedarse tal cual al dar click en #modal_contenedor
    – IntruzO
    Commented el 14 dic. 2020 a las 16:52
0

No soy experto en el tema, pero por lo que he entendido quieres que al dar click en un div, este desaparezca, en cambio si es al contrario no realice ninguna accion. Se me ha ocurrido lo siguiente:

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
            <div id="modal_global" style="width:100vw;height:100vh;position:fixed;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;">
            <div id="modal_contenedor" style="min-width:500px;background:white;padding:50px;border-radius:4px;text-align:center;">Hola soy un contenido</div>
            </div>
    

<script>
      $(document).mouseup(function (e)
    {
        var container = $("#modal_contenedor");
        var global = $("#modal_global");
        if (container.is(e.target) && container.has(e.target).length === 0)
        {
           alert("HOLA SOY UN CONTENIDO");
        }else if(global.is(e.target) && global.has(e.target).length === 0){
            global.fadeOut();
        }
    });
    </script>

En este caso use fadeOut(); que hace el div "modal_global" se desaparezca, pero se podria usar hide(); en cambio en la seccion de container que colocado un alert, indicado que este ha sido pulsado. Pero solo podrias dejarlo en blanco para que no haga ninguna funcion.

Espero que esto te pueda ayudar o darte una idea de lo que quieres lograr.

1
  • esta solucion es igual que la mia "practicamente", pero lo que yo no queria era que se me vallan recursos escuchando los click en document, queria algo mas "lite"
    – IntruzO
    Commented el 14 dic. 2020 a las 10:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.