Закрыть модал используя mouseleave

Я разработал модал с помощью начальной загрузки. Есть ли способ закрыть модал с помощью 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>

Всего 2 ответа


В любом случае, я сделал это немного лучше, сейчас я пытаюсь вызвать закрытие при отпускании мышью.

Я посмотрел на ответ и документацию.

Документация гласит: «Модалы используют position: fixed, что иногда может быть немного конкретным в отношении его рендеринга. По возможности, размещайте ваш модальный HTML в позиции верхнего уровня, чтобы избежать потенциального вмешательства со стороны других элементов».

Поэтому я добавил положение: исправлено к классу .modal в файле .css

Я все еще смотрю на закрытие мышиного выхода для вас, но также, только если документы также говорят: «Нажатие на модальный« фон »автоматически закроет модальное». Именно так я и сделал в добавленном стеке, мерцание все равно прекратилось.

источник: Bootstrap

Stackblitz: Stackblitz

Этот ответ от 8 месяцев назад также может быть полезен: закрытие Angular при наведении курсора - рекомендуется другой подход


Смотрите документацию по моделям начальной загрузки, чтобы узнать, как это работает.

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

Вам может понадобиться использовать Angular Material Dialog .


Есть идеи?

10000