2

Tengo un formulario que está oculto, y un botón “Mostrar” que al presionarlo muestra el formulario… La idea es que cuando haga click fuera del elemento (formulario) debe ocultarse… El problema es que cuando hago click en el formulario también se oculta…

Se supone que con la negación le estoy diciendo que no oculte si presiono ciertos elementos, Pero no funciona.

 $("*:not(#boton_mostrar,  #frm_nuevo)").on("click", function(){ … }); 

¿Cómo puedo hacer para que no oculte si presiono el formulario?.. Gracias de antemano.

            
        $(function(){
            //oculta al hacer click fuera del elemnto (formulario)
            $("*:not(#boton_mostrar, #frm_nuevo)").on("click", function(){
            if ($("#frm_nuevo").is(":visible")){
                $("#frm_nuevo").slideUp();
            }
            });
    
            //Muestra elento (formulario)
            $("#boton_mostrar").on("click", function(event){
                $("#frm_nuevo").slideToggle();
                event.stopImmediatePropagation();
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        
        <button id="boton_mostrar">Mostrar</button><br><br>
        
        <form id="frm_nuevo" style="display:none">
           Nombre: <input><br>
           Apellido: <input><br><br>       
        </form>
        
    </body>

4
  • Intenta quitar el #boton_mostrar,
    – alanfcm
    Commented el 4 jun. 2018 a las 14:39
  • Ya lo hice y no funciona. La idea también es que sea en diferentes elementos…
    – jose7777
    Commented el 4 jun. 2018 a las 14:43
  • @jose7777 Ya hay dos respuestas válidas. Revísalas, a ver si te sirven. Commented el 4 jun. 2018 a las 15:20
  • Muchas Gracias gente… Las dos funcionan muy bien… Saludos.
    – jose7777
    Commented el 4 jun. 2018 a las 17:26

2 respuestas 2

4

Utilizando el evento de document le decimos "Si haces clic en todo el documento HTML pero, dentro del contenedor, en este caso container que es tu formulario, no lo ocultes, en cambio si hacemos click en todo el documento pero no detectamos el container oculta container

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

$(function(){
    //oculta al hacer click fuera del elemnto (formulario)
    
    $(document).on("click",function(e) {
       var container = $("#frm_nuevo");       
            if (!container.is(e.target) && container.has(e.target).length === 0) { 
            //Se ha pulsado en cualquier lado fuera de los elementos contenidos en la variable container
               container.slideUp();               
            }
     });

    //Muestra elento (formulario)
    $("#boton_mostrar").on("click", function(event){
        $("#frm_nuevo").slideToggle();
        event.stopImmediatePropagation();
    });
});

</script>    

<button id="boton_mostrar">Mostrar</button><br><br>

<form id="frm_nuevo" style="display:none; border:solid;">
   Nombre: <input><br>
   Apellido: <input><br><br>       
</form>

1
  • hola @cignius use este codigo 3 botones de una pagina y en chrome funciona perfecto abriendo cada formulario pero en mozilla abre solo el primero... que puede ser?
    – Fernanda
    Commented el 9 mar. 2019 a las 20:24
1

he encontrado una solución, utilizando el evento mouseover y mouseout para habilitar el evento click que ejecuta la función de muestra.

            
        $(function(){
            //oculta al hacer click fuera del elemnto (formulario)
$("#contenedor").mouseover(function(e){
$("body").unbind("click");
});
$("#contenedor").mouseout(function(e){
$("body").click(function(evt){
  if ($("#frm_nuevo").is(":visible")){
      $("#frm_nuevo").slideUp();
  }
});
});
           /* $("*:not(#contenedor)").on("click", function(){
            if ($("#frm_nuevo").is(":visible")){
                $("#frm_nuevo").slideUp();
            }
            });
    */
            //Muestra elento (formulario)
            $("#boton_mostrar").on("click", function(event){
                $("#frm_nuevo").show(500);
                event.stopImmediatePropagation();
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <div id="contenedor" style="padding:10px; border:1px solid black; display:inline-block;">  
        <button id="boton_mostrar">Mostrar</button><br><br>
        
        <form id="frm_nuevo" style="display:none">
           Nombre: <input><br>
           Apellido: <input><br><br>       
        </form>
    </div>
    </body>

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.