Javascript 使用CSS单击鼠标左/右或上/下定位div

我需要一个弹出窗口从鼠标点击的位置打开。从可用性角度来看，当点击发生在窗口边缘附近时，我正在调整JS中弹出窗口的位置[点击的右/左和点击的上/下]，如下所示：

function myfunc(e) {
let ele = document.getElementById('my-dialog');
ele.style["left"] =
  (window.innerWidth - e.pageX) < ele.offsetWidth ? e.pageX - ele.offsetWidth : e.pageX;
ele.style["top"] =
  (window.innerHeight - e.pageY) < ele.offsetHeight ? e.pageY - ele.offsetHeight : e.pageY; }

函数myfunc（e）{
让ele=document.getElementById（'my-dialog'）；
元素样式[“左”]=
（window.innerWidth-e.pageX）

有没有一种方法可以仅仅使用CSS来实现这一点（或者有更好的JS解决方案来解决这个问题。）

最小工作代码示例。

请参阅工作演示：

为了让它工作，我更改了

左侧

和

顶部

样式设置以添加“px”。根据规范，长度设置需要相对或绝对测量单位，如“px”、“%”或“em”。

函数myfunc（e）{
让ele=document.getElementById（'my-dialog'）；
var newLeft=（window.innerWidth-e.pageX）

---

希望这能有所帮助。

您可以看看这一点-感谢您提到添加单元，但我正在检查是否有CSS技巧可以让我完全避免使用javascript。

function myfunc(e) {
    let ele = document.getElementById('my-dialog');

    var newLeft = (window.innerWidth - e.pageX) < ele.offsetWidth ? e.pageX - ele.offsetWidth : e.pageX;
    ele.style.left = newLeft + 'px';

    var newTop = (window.innerHeight - e.pageY) < ele.offsetHeight ? e.pageY - ele.offsetHeight : e.pageY;
    ele.style.top = newTop + 'px';
  }
  document.onclick = myfunc;