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

Question

[jazzus]

Vue + модальное окно Bootstrap 4 (с вырезанным js) + Laravel
Активация окна через
v-show="active"
Анимация через transition + css. Как закрыть окно кликом вне окна? Т.е. в любой части фона вне модалки. Чтобы не нужно было закрывать кликом на крестик. Спасибо

Comments

[Андрей]

Кстати есть такая штука, рекомендую
Bootstrap + Vue
https://bootstrap-vue.js.org/docs/components/modal

Answer 1

[Владимир Проскурин]

Варианта 2
1) Вешаете @click.self на фон. https://jsfiddle.net/37e4wmgo/3/
2) Вешаете вот это https://www.npmjs.com/package/vue-click-outside на форму.

Comments

[jazzus]

попробовал @click.self
В моем случае отказывается кликать

<template>
  <div @click.self="modalClose()">

    <!-- MODAL -->
    <transition name="modal">
         <div class="modal fade show" tabindex="-1" role="dialog" v-show="active">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="modalClose()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
    </transition>
   <transition name="fade">
     <div v-show="active" class="modal-backdrop fade show"></div>
   </transition>
   <!-- End Modal -->

 </div>
</template>

[jazzus]

а понял сори за невнимательность) Сейчас попробую

[jazzus]

Пробовал всякие варианты - не кликает
метод

outside: function(){
        this.active = false;
        this.$emit('modal_close')
      },

сама модалка - это модуль
this.$emit('modal_close')
уничтожает ее.
Что не так делаю? Вроде прописал outside на внешнем диве (как в примере выше)

<div @click.self="outside">
...
</div>

[jazzus]

если просто
<div @click="outside">
то кликает на фоне, но кликает и на модалке

[Владимир Проскурин]

jazzus, попробуйте не на верхний див, а вот так (и без self)

<template>
  <div>

    <!-- MODAL -->
    <transition name="modal">
         <div class="modal fade show" tabindex="-1" role="dialog" v-show="active">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="modalClose()">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
    </transition>
   <transition name="fade">
     <div v-show="active" class="modal-backdrop fade show"  @click="modalClose()"></div>
   </transition>
   <!-- End Modal -->

 </div>
</template>

Если не получится, закиньте свой код на jsfiddle (чтобы он работал), и киньте ссылку, так будет легче вам помочь.

[jazzus]

Владимир Проскурин, там видимо сложно слелать, чтобы он заработал. У меня там все в шаблонах-компонентах. Что-то такое получилось)) https://jsfiddle.net/d5oem91L/7/
но кликает тоже только на крестик

[Владимир Проскурин]

jazzus, у вас не получалось, потому, что блок modal-backdrop находится позади блока modal, т.е. у него меньше значение z-index. Либо увеличьте его, либо вешайте @click.self на modal. Вот так https://jsfiddle.net/36p84mdv/2/

[jazzus]

Владимир Проскурин, огромное спасибо!)

Answer 2

[Максим Тихонов]

npm install clickaway

Answer 3

[profesor08]

У тебя есть два пути, в первом тебе надо искать нужный узел, во втором тебе надо расположить за элементом другой фоновый элемент, по которому кликаешь. Второй проще, но требует дополнительный элемент на странице(фон видимый/невидимый) и дополнительные стили для него, чтоб он был на весь экран, позади нужного элемента и он не должен быть родителем отображаемого элемента.
При первом варианте ты вешаешь обработчик клика на body, в нем ты получишь текущий target по которому был произведен клик, далее тебе надо рекурсивно проверить, не является ли он потомком или самим отображаемым элементом, если нет, то клик был за пределами. Проверять надо e.target.parentNode.