Hello Jerome (and other readers),
I shall give you the skeleton of a sample solution. You need to
consult the documentation and to adapt it to your needs.
The html page contains for instance:
<div id="PopupLine" class="Popup" onclick="PopupClick();">
Line menu<br><br>
<div id="LinePaste">Paste</div>
<div id="LineDel">Delete</div>
<div id="MenuClose">Close</div>
</div>
The associated css file specifies the initial style properties. Something
like this:
*.Popup {align: center; background-color: yellow; border-style: outset;
left: 300; top: 50; padding : 5; position: absolute; visibility: hidden;
zIndex: 100}
You may also use the style attribute in the div.
After loading you have specified
document.oncontextmenu = PopupOpen;
So when right-clicking:
function PopupOpen()
{ var oSel = window.event.srcElement;
// etcetera. You might want to determine some screen context.
oMenuActive = document.all["PopupLine"];
// The following code is tricky because you must consider scrolling.
// Many examples on internet do not consider scrolling.
oMenuActive.style.posLeft = event.clientX + document.body.scrollLeft;
oMenuActive.style.posTop = event.clientY + document.body.scrollTop;
// The upperleft corner is the clicking point, unless you
// approach the border then it selects another corner!
if (oMenuActive.style.posLeft + oMenuActive.offsetWidth >
document.body.clientWidth)
{ oMenuActive.style.posLeft = oMenuActive.style.posLeft -
oMenuActive.offsetWidth;
}
if (oMenuActive.style.posTop + oMenuActive.offsetHeight >
document.body.clientHeight)
{ oMenuActive.style.posTop = oMenuActive.style.posTop -
oMenuActive.offsetHeight;
}
oMenuActive.style.visibility = "visible";
oMenuActive.setCapture();
return false;
}
When you click on the menu:
function PopupClick()
{ var oMenuSel = window.event.srcElement;
// Test here the value of oMenuSel.id (e.g. id=="LinePaste")
oMenuActive.style.visibility = "hidden";
document.releaseCapture();
// Do the selected action
}
This should give you sufficient clues.
Actually I use several different popup's dependent on the clicking-context.
This makes the code more complicated, although not essentially more
difficult.
And remember: C'est en forgeant qu'on devient forgeron.
Salutations,
Kees