在悬停按钮上显示引导模式

Question

我使用引导程序创建了一个模式。有没有办法打开我将鼠标悬停在按钮上的模式？

DEMO

代码

打开模态

<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

尝试使用mouseenter 属性指令，如下所示：

(mouseenter)="$event.target.click()"

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

---

另一种方式：

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

在您的控制器中：

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

---

您可以在这里阅读 mouseenter 文档： https://angular.io/guide/attribute-directives