使用 mouseleave 关闭模态框

Question

我使用引导程序开发了一个模式。有没有办法使用 mouseleave 关闭模式？

谢谢

DEMO

HTML

<button (mouseenter)="onMouseEnter($event)" (mouseleave)="onmouseleave($event)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        Modal body..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

无论如何，我已经让它变得更好了，我现在正试图触发 mouseleave 的关闭。

我查看了给出的答案和文档。

文档说：“Modals 使用 position:fixed，它的渲染有时会有些特殊。只要有可能，将模态 HTML 放在顶级位置，以避免来自其他元素的潜在干扰。”

所以我在 .css 文件中添加了 position:fixed 到 .modal 类

我仍在为您查看鼠标离开时的关闭，但也只是以防文档还说：“单击模态“背景”将自动关闭模态。”这是我在添加的stackblitz中完成的方式，闪烁已经停止了。

来源：Bootstrap

Stackblitz：Stackblitz

8 个月前的这个答案也可能有帮助：Closing Angular on mouseover - recommended another approach

Answer 2

请参阅bootstrap modals documentation 了解其工作原理

onmouseleave(event: any): void {
  event.target.click();
}

您可能需要使用Angular Material Dialog。