使用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的关闭。

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

[文档说：“模态使用位置：固定，有时在渲染上可能有些特殊。只要有可能，将模态HTML放在顶层位置，以避免受到其他元素的潜在干扰。”

所以我添加了位置：固定到.css文件中的.modal类

[我仍在为您留意mouseleave的收盘价，而且，以防万一文档还说：“单击模式”背景“将自动关闭模式。”这是我在添加的堆栈闪电中完成此操作的方式，无论如何，闪烁已停止。

来源：Bootstrap

Stackblitz：Stackblitz

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

Answer 2

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

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

您可能需要使用Angular Material Dialog。