Pop up div with absolute position next to click

Question

I am trying to make a right click lead to a div pop up. However, the click will be inside a cesium window, which only lets a div show if it has absolute position. Is it possible to edit the pop up position of a div with absolute position?

Right now, my code looks like this:

var editHandler = newCesium.ScreenSpaceEventHandler(scene.canvas);
editHandlersetInputAction(function(e){
  var shapeEditMenu = document.getElementById("shapeEditMenu");
  shapeEditMenu.style.display = "block";
  shapeEditMenu.style.left = e.clientX;
  shapeEditMenu.style.top = e.clientY;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

#shapeEditMenu {
  position: absolute;
  display: none:
  top: 80px;
  height: 50px;
  width: 80px;
}

<div id="shapeEditMenu">
  Line thickness:
  <input type="number"> pt
</div>

It doesn't work here because there isn't cesium, but what happens in my actual code is that the div pops up on right click, but always is at the same position, not at the place where you right click.

Answer 1

As mentioned in the comments, there is some API confusion going on here. clientX is part of browser-native API, not Cesium's API. Since you're using Cesium's event handling system, you get events from that API. In this case, you would use e.position.x and follow that up with a + 'px' to indicate CSS-pixel units for the stylesheet.

Also you have a few typos here:

• newCesium. should be new Cesium.
• editHandlersetInputAction should be editHandler.setInputAction
• display: none: should be display: none;

Here's a live Sandcastle demo that shows a right-click "Testing" menu show up at the mouse location.

var viewer = new Cesium.Viewer('cesiumContainer');

var editHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

editHandler.setInputAction(function(e) {
  var shapeEditMenu = document.getElementById("toolbar");
  shapeEditMenu.textContent = 'Testing';
  shapeEditMenu.style.display = "block";
  shapeEditMenu.style.left = e.position.x + 'px';
  shapeEditMenu.style.top = e.position.y + 'px';
  shapeEditMenu.style.background = 'rgba(42, 42, 42, 0.8)';
  shapeEditMenu.style.border = '1px solid #888';
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

editHandler.setInputAction(function(e) {
  var shapeEditMenu = document.getElementById("toolbar");
  shapeEditMenu.style.display = "none";
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);