How to close this menu clicking outside?

Question

I have this menu:

CSS

#message { 
 display: none; 
 position: absolute; 
 width: 120px; 
 background: #fff; 
 color: #000; 
 font-weight: bold; 
}

When I click in it opens #message. My problem is to close this thing.

JS:

$(function() {

  $("#subm").click(function(evt) {
    $("#message").css({
      top: 55,
      left: evt.pageX - 55
    }).show();
  });

});

I try to put this code inside function above:

  $('html').click(function(evt) {
    if($('#message').is(":visible")) {
        $('#message').hide();
    }
  });

but nothing is happening, apparently menu is opening and closing in the same time. What is wrong? how can I close this menu clicking outside message box or even in span class?

JSFiddle

Answer 1

You can bind a click handler to the document to close it:

Example: https://jsfiddle.net/jmpf1usu/4/

  $("#subm").click(function(evt) {
    $("#message").css({
      top: 55,
      left: evt.pageX + 55
    }).show();

      evt.stopPropagation();
  });

  $(document).click(function(){
      $("#message").hide();
  });

evt.stopPropagation() is required so that the click never reaches the document , thus immediately triggering it to close again.

Answer 2

Try changing your js to this:

$("#subm").click(function() {
  $("#message").show();
 });

$("#message").mouseleave(function(){
   $("#message").hide(); 
});

When the user hits the button the menu will open. When the user mouse leaves the div it will hide it. Is that what you're looking for?

If you really want a click to remove the visibility you can do:

$("body").on('click',function(){
   $("#message").hide(); 
});

I just prefer the mouse leave, tbh.

Answer 3

You can use the below code for hide message

 $(function() { $("#subm").click(function(evt) { $("#message").css({ top: 55, left: evt.pageX + 55 }).show(); }); $(document).click(function(event) { if (!$(event.target).is("#subm")) { $("#message").hide(); } }); }); 

  #message { display: none; position: absolute; width: 120px; background: red; color: #fff; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="subm">open</span> <div id="message"> message </div> 

Answer 4

please try with below code snippet.

$(function() { 
  $("#subm").click(function(evt) {
       evt.stopPropagation();
    $("#message").css({
      top: 55,
      left: evt.pageX + 55
    }).show();
  });


    $('html').click(function() {
        $("#message").hide();
    });
});

JSFiddle

Answer 5

You can simply use .hide to hide that element. Add an event listener for #message and do the following:

  $("#message").click(function(evt) {
     $("#message").hide();
  });

I put a working example here: https://jsfiddle.net/jmpf1usu/8/

Answer 6

Try this:

 $(function () { $("#message").click(function (evt) { evt.stopPropagation(); }); $("#subm").click(function (evt) { evt.stopPropagation(); $("#message").css({ top: 55, left: evt.pageX + 55 }).toggle(); }); $('html').click(function (evt) { if ($('#message').is(":visible")) { $('#message').hide(); } }); }); 

 #message { display: none; position: absolute; width: 120px; background: red; color: #fff; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="subm">open</span> <div id="message">message</div> 

Answer 7

To do it without stopPropagation() shenanigans you can add the following:

$(document).ready(function(){
    $(document).click(function(event) {         
        if(event.target.id != "message" 
            && event.target.id != "subm" 
            && $('#message').is(':visible')) 
            {            
                    $('#message').hide();

            }        
    });
 });

This is set up so that if the user clicks anything that is not the #message and is not the #subm open span , the message div will hide.

Expanded your fiddle: https://jsfiddle.net/jmpf1usu/10/

Good luck :).