0

Tengo una function que al pinchar un botón me despliega un div con alguna información y uso e.stopPropagation por que creo otra function que al dar click en cualquier parte del html me esconda el div de nuevo la cosa es que el click se propaga al div que yo quiero que se muestre y no quiero que lo haga por que ese div también necesito darle click para otras funciones e aquí mi código para que entiendan mejor

$('.likes .inbox').click(function(e) {
  e.stopPropagation();
  $(".inbox-desplegate").stop().slideToggle();
  $('#send-inbox-input').focus();
})

$("html").click(function() {
  $(".inbox-desplegate").hide();
})
.inbox-desplegate-content {
  min-height: 150px;
  border: solid 1px lightgrey;
}

.inbox-desplegate {
  max-width: 300px;
  position: absolute;
  width: 100%;
  min-height: 200px;
  background: white;
  top: 90px;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.176) !important;
  z-index: 3;
  border: solid 1px lightgrey;
  display: none;
}

.inbox-desplegate-footer {
  position: relative;
  bottom: 0;
}

.likes {}
<link 
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous">

<!--this div contain the listener on click-->
<div class="col-4 text-center likes">
  <a href="#" class="inbox"> <big><i class="fa fa-inbox"></i></big> Inbox </a>
</div>

<!--this div is the one hidden-->
<div class="inbox-desplegate" id="inbox-desplegate">
  <div class="card-header p-3">
    <span class="header-title">Send message</span>
    <button 
      type="button" class="close mb-2"
      data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </div>
    <div class="card-body inbox-desplegate-content" >
    </div>
    <div class="card-footer  inbox-desplegate-footer">
      <form class="form-group">
        <div class="input-group mb-3">
          <input 
            type="text" class="form-control"
            placeholder="type message"
            aria-label="Recipient's username"
            aria-describedby="button-addon2" id="send-inbox-input">
          <div class="input-group-append">
            <button 
              class="btn btn-primary"
              type="button"
              id="button-addon2"><i class="fa fa-location-arrow"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

como vieron al dar click en inbox se despliega bien y al dar click en cualquier parte de el html menos en inbox se oculta el div , yo quiero decirle mediante e código que el click de la función html no se propague al div que se despliega cual sería la solución? gracias de ante manos amigos!

5
  • ¿Quieres algo como un modal? Commented el 21 sept. 2018 a las 0:07
  • noup simplemente le di el estilo de un modal pero nada que ver
    – andy gibbs
    Commented el 21 sept. 2018 a las 0:10
  • si vas a imitar la onda modal, el truco está en que un modal despliega un div por debajo (por lo general un grisado: fondo negro con opacity o alpha channel), el click para cerrar se engancha en este div (que ademas permite no propagar eventos para el resto del html). en niveles sería arriba de todo el contenido del modal, un nivel mas abajo el div este que opacea y por debajo queda el html original Commented el 21 sept. 2018 a las 0:31
  • entiendo perfectamente a que te refieres en mi caso es un poco diferente @aloMalbarez por que en realidad los dos estan lejos el uno del otro solo puse un resumen de mi codigo original por que es demasiado posiblemente casi 2mil lineas de codigo y los dos estan lejos del otro mas o menos la etiqueta que le doy click esta en el header y el div que se muestra esta en el footer haste una idea y me entenderas de por que no hago lo que dices
    – andy gibbs
    Commented el 21 sept. 2018 a las 0:46
  • si el div intermedio es fixed a la ventana no importa donde estén las otras cosas, alternativas es engancharte al mousedown y calcular que no este en el div q abre, si fuera solo un input la perdida de focus daria otra oportunidad de cerrarlo. no hace falta poner todo el código pero estaría bien notar esa cuestion posicional de que el abrir está arriba y lo que abre está abajo (posiblemente, seguramente fuera de la pantalla visible) Commented el 21 sept. 2018 a las 1:29

1 respuesta 1

1

Basado en lo que entendí que quieres lograr te dejo una posible solución. Quiza no sea la mejor pero te podría ayudar en algo.

$('.likes .inbox').click(function(e) {
  e.stopPropagation();
  $(".inbox-desplegate").stop().slideToggle();
  $('#send-inbox-input').focus();
})

$("html").click(function() {
  $(".inbox-desplegate").hide();
})



// Necesario para poder cerrar el modal
$(".close").click(function() {
   $(".inbox-desplegate").hide();
})

// Necesario para evitar que se cierre el modal al hacer click encima
$(".inbox-desplegate").click(function(e){
    e.stopPropagation();
});

// Ejecutar acción dentro del modal
$("#button-addon2").click(function(e){
    //e.stopPropagation();
    console.log('Send Message');
});
.inbox-desplegate-content {
  min-height: 150px;
  border: solid 1px lightgrey;
}

.inbox-desplegate {
  max-width: 300px;
  position: absolute;
  width: 100%;
  min-height: 200px;
  background: white;
  top: 90px;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.176) !important;
  z-index: 3;
  border: solid 1px lightgrey;
  display: none;
}

.inbox-desplegate-footer {
  position: relative;
  bottom: 0;
}

.likes {}
<link 
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous">

<!--this div contain the listener on click-->
<div class="col-4 text-center likes">
  <a href="#" class="inbox"> <big><i class="fa fa-inbox"></i></big> Inbox </a>
</div>

<!--this div is the one hidden-->
<div class="inbox-desplegate" id="inbox-desplegate">
  <div class="card-header p-3">
    <span class="header-title">Send message</span>
    <button 
      type="button" class="close mb-2"
      data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </div>
    <div class="card-body inbox-desplegate-content" >
    </div>
    <div class="card-footer  inbox-desplegate-footer">
      <form class="form-group">
        <div class="input-group mb-3">
          <input 
            type="text" class="form-control"
            placeholder="type message"
            aria-label="Recipient's username"
            aria-describedby="button-addon2" id="send-inbox-input">
          <div class="input-group-append">
            <button 
              class="btn btn-primary"
              type="button"
              id="button-addon2"><i class="fa fa-location-arrow"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Genial justo lo que nececitaba gracias tu solucion esta muy bien saludos!
    – andy gibbs
    Commented el 21 sept. 2018 a las 15:31

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.