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

Vue + модальное окно Bootstrap 4 (с вырезанным js) + Laravel
Активация окна через
v-show="active"
Анимация через transition + css. Как закрыть окно кликом вне окна? Т.е. в любой части фона вне модалки. Чтобы не нужно было закрывать кликом на крестик. Спасибо
  • Вопрос задан
  • 6761 просмотр
Решения вопроса 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
mylp
@mylp
php + js = site + crm
npm install clickaway
Ответ написан
Комментировать
profesor08
@profesor08
У тебя есть два пути, в первом тебе надо искать нужный узел, во втором тебе надо расположить за элементом другой фоновый элемент, по которому кликаешь. Второй проще, но требует дополнительный элемент на странице(фон видимый/невидимый) и дополнительные стили для него, чтоб он был на весь экран, позади нужного элемента и он не должен быть родителем отображаемого элемента.
При первом варианте ты вешаешь обработчик клика на body, в нем ты получишь текущий target по которому был произведен клик, далее тебе надо рекурсивно проверить, не является ли он потомком или самим отображаемым элементом, если нет, то клик был за пределами. Проверять надо e.target.parentNode.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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