相对于鼠标指针显示模态组件并正确定位模态组件

Question

我有一个 hover(mouseenter)、click、mouseleave 的实现，它会在目标元素悬停时显示和隐藏弹出模式组件。

但问题是弹出模式组件打开距离悬停元素有点远，这是由于我给出的 top,left 位置。

如何正确定位此模态组件，是否可以将弹出组件放在鼠标光标的旁边，而不是将弹出组件放在悬停元素的旁边？

（当我将鼠标悬停在元素上时，弹出组件的距离也会发生变化）。

也许 CSS :after 可以解决？

最小可重现示例

https://stackblitz.com/edit/angular-34rr1t?file=src/app/app.component.html

用于处理弹出模式打开和关闭的 TS 文件

modalShow = false;
modalleft;
modaltop;

addClickEvent(e,name) {

if (e.type === 'click') {
                    this.modalShow= true;
                    }
 else if (e.type === 'mouseenter') {
                        this.modalleft = e.clientX
                        this.modaltop = e.clientY
                        this.closeModal("room");
                        this.modalShow= true;

                    }
 else if (e.type === 'mouseleave') {
                        this.closeModal('room');
                        this.modalShow= false;
                    }             
}

closeModal(modalType: string) {
    this.modal[modalType].active = false;
}

HTML 用于处理弹出模式的打开和关闭

 <div class="fs-heatmap-wrapper__content__box"
      *ngFor="let existingZone of floor.droppeditem"
      (mouseenter)="addClickEvent($event,floor.name)"
      (mouseleave)="addClickEvent($event,floor.name)"
      (click)="addClickEvent($event,floor.name)">
 </div>

 <fs-modal *ngIf="!modalShow"
           [ngStyle]="{'top.px': modalleft,
                       'left.px':modaltop ,
                       'position':'absolute'}"
           (onCloseModal)="closeModal('room')">
 </fs-modal>

HTML fs-模态

<div class="modal">
<div class="modal__body">
</div>
</div>

CSS fs-模态

.modal {
background: rgba(0, 0, 0, 0.5);
max-height: 100%;
overflow-y: scroll;
z-index: 9999999;   

&__body {
    pointer-events: all;
    padding: 50px;
    background: #ffffff;
    box-shadow: 4px 45px 23px -6px rgba(0, 0, 0, 0.4);
    margin: 2% 0;
    height: auto;
    *min-height: 1200px;
}

Answer 1

您的代码中存在多个问题：

您正在将鼠标位置的左值分配给模态的顶部值，并将鼠标位置的顶部值分配给模态的左值。你需要扭转它。
mouseenter 和 mouseleave 仅在指针分别进入和离开 DOM 元素时触发一次。这就是为什么您的模态框会出现在某个角落，因为这些值是针对鼠标指针首次进入或离开时的事件。
如果您想要模态跟随您的指针的行为，如评论中 link 中所述，您将需要 mousemove 事件

你的addClickEvent（我会把它命名为handleEvent），需要是这样的：

  addClickEvent(e) {
    if (e.type === 'mousemove') {
      this.modalleft = e.clientX
      this.modaltop = e.clientY
    }
    else if (e.type === 'mouseenter') {
      this.modalShow = true;
    }
    else if (e.type === 'mouseleave') {
      this.modalShow = false;
    }
  }

您的代码的分支，具有以下更改：https://stackblitz.com/edit/angular-zqeeqv?file=src/app/app.component.html

相对于鼠标指针显示模态组件并正确定位模态组件

To display modal component relative to the mouse pointer and correct positioning of modal component

html

javascript

css

angular

angular7