Question

我需要一个弹出窗口才能从鼠标单击的位置打开。从可用性的角度来看，当单击发生在窗口边缘附近时，我正在调整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; }

有没有一种方法可以仅使用CSS来实现（或者是否有更好的JS解决方案。）

最小工作代码示例here。

Answer 1

查看有效的演示：https://jsfiddle.net/drumperl/ce532rnf/

为使此工作正常进行，我更改了left和top样式设置以添加'px'。根据规范，长度设置需要相对或绝对测量单位，例如“ px”，“％”或“ em”。 https://developer.mozilla.org/en-US/docs/Web/CSS/length

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;

希望这会有所帮助。

使用CSS将div定位在鼠标左/右或上/下

1 个答案: