z-index is not working on right click

I am trying to implement a contextmenu that appears on right click to div with class contextFolder which has z-index: 1000.

To do that, I bind contextmenu event to divs with JQuery. This is working fine. I want this contextmenu to disappear when

  • User left clicks anywhere on the screen,
  • User right clicks anywhere on the screen except any other div.contextfFolder

If while contextmenu is opened and right click happens on other div.contextFolder, I want my current contextmenu to disappear and open a new one on new div.contextFolder.

To do that when I show to contextmenu,

  • I also create a overlay with height: 100%, width: 100%, and z-index: 100.
  • I bind left click event to this overlay such that when it is clicked,
    • overlay is removed,
    • contextmenu is hidden.
  • I also bind contextmenu to overlay to hide contextmenu and remove overlay when right clicked to any point except another div.contextFolder
  • To prevent left click event of overlay on contextmenu, I also assign z-index: 101 to contextmenu. (z-index of overlay is 100)

This seems all fine to me.(I am newbie in CSS, so I might be missing something very obvious).

All working fine, except when I right click on div.contextFolder when a contextmenu is already open on another div.contextFolder, it goes to contextmenu event of overlay (which hides to current one). I want new one to open.

I have tested this in Chrome and Firefox latest versions.

This is the fiddle.

Thank you.


I've just created a fiddle for you. All I did was rework your javascript.


Hope that helps you.

PS: I also added other code which checks to see whether clicks after the initial opening of a menu are clicks on a child of the menu


 bind('contextmenu' , function(e){
             $(".folderContextMenu").css( {position:"absolute", top:e.pageY, left: e.pageX, zIndex: '101'} );
                //alert('not working');
                return false;

The problem is that you are not moving the context menu again. It stays at the old position. Therefore I have a bit changed the bind-function. But if you are using the overlay, and apply the bind function to it, the menu shows up everywhere, that's the second problem.

Here is the complete, changed JSFiddle

EDIT: I have used the window onclick method, look here and here is the proof that the menu is rebound.

Need Your Help

Android - How i can display an Excel table into a textview?

android excel datatable textview

I'm new in Android world and of course in this community.

argparse: some mutually exclusive arguments in required group

python argparse

I have a set of arguments that can logically be separated in 2 groups: