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

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

.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

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

1. 您将鼠标位置的左侧值分配给模态的顶部值，并将鼠标位置的顶部值分配给模态的左侧值。你需要扭转这种局面。
2. mouseenter 和 mouseleave 只触发一次，当指针分别进入和离开 DOM 元素时。这就是为什么您的模态显示在某个角落的原因，因为这些值是针对鼠标指针首次进入或离开时的事件。
3. 如果您想要跟随指针的模态行为，如 cmets 中发布的链接中所述，您将需要 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