Hide Element by clicking outside an element

Question

Hide Element by clicking outside an element

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I have a form that is hidden, and a "Show" button that when pressed shows the form ... The idea is that when I click outside the element (form) it must be hidden ... The problem is that when I click on the form too it's hidden ...

It is assumed that with denial I am telling you not to hide if I press certain elements, but it does not work.

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

How can I avoid hiding if I press the form? Thanks in advance.

            
        $(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>

jquery

asked by jose7777 04.06.2018 в 16:34

source

2 answers

Compare different ArrayList's in Java JSON.parse: expected property name or '}' JavaScript

score 3 · Answer 1

Using the event of document we say "If you click on the entire HTML document but, inside the container, in this case container that is your form, do not hide it, instead if we click on all the document but we do not detect the container hidden 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>

score 1 · Answer 2

I have found a solution, using the event mouseover and mouseout to enable the event click that executes the sample function.

            
        $(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>