Как закрыть модалку кликом вне окна?

Vue + модальное окно Bootstrap 4 (с вырезанным js) + Laravel
Активация окна через
v-show="active"
Анимация через transition + css. Как закрыть окно кликом вне окна? Т.е. в любой части фона вне модалки. Чтобы не нужно было закрывать кликом на крестик. Спасибо
  • Вопрос задан
  • 1092 просмотра
Решения вопроса 1
Vlad_IT
@Vlad_IT
Front-end разработчик
Варианта 2
1) Вешаете @click.self на фон. https://jsfiddle.net/37e4wmgo/3/
2) Вешаете вот это https://www.npmjs.com/package/vue-click-outside на форму.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08
У тебя есть два пути, в первом тебе надо искать нужный узел, во втором тебе надо расположить за элементом другой фоновый элемент, по которому кликаешь. Второй проще, но требует дополнительный элемент на странице(фон видимый/невидимый) и дополнительные стили для него, чтоб он был на весь экран, позади нужного элемента и он не должен быть родителем отображаемого элемента.
При первом варианте ты вешаешь обработчик клика на body, в нем ты получишь текущий target по которому был произведен клик, далее тебе надо рекурсивно проверить, не является ли он потомком или самим отображаемым элементом, если нет, то клик был за пределами. Проверять надо e.target.parentNode.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы