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

Question

[hollanditkzn]

Я сделал свою модальное окно, типо alert под свои нужды, только такой момент, мне нужно реализовать если кликнуть по области который не заходит модального окна то она бы закрывалась. В принципе как обычное модальное окно сделать при закрытие. То есть там или при нажатие на кнопку или кликнуть по области за модальном окном. Вот это нужно мне реализовать. Удаление объекта мне не помогло
Вот мои пример https://jsfiddle.net/hollanditkzn/nwajvdrr/43/
Сейчас он закрывается когда нажать на нет

Answer 1

[Andrew]

Уже писал где-то. глянь как реализованы модалки от "известных производителей".
Как вариант, делаешь слой, который выкатывается вместе со всплывашкой, с меньшим z-index, по клику по нему - действие как и при клике по кнопке закрытия.

Answer 2

[imdeveloper]

Исправил Ваш код немного: https://jsfiddle.net/nwajvdrr/80/ в самом конце.
Используйте .on когда создаете динамически элементы

Comments

[hollanditkzn]

Как понимаю чтобы сделать так как нужно мне нужно как написали по предыдущему комментарию, создать еще div который будет сверху области body в модальном окне

[imdeveloper]

Ну если вы его создадите через js, то не сработает все равно. вам нужно будет вешать событие через функцию .on, как я написал в примере. Другое дело если вы создадите этот слой в html - тогда вам подойдет и простой . click()

[hollanditkzn]

imdeveloper, Если создать html. То мне необходимо будет его скрывать как понимаю? Просто если да, то там есть один минус. В реальном проекте он берет id записи, для удаление. Конечно можно его можно перемещать объект в объекте в js. Но думаю что я подумаю над этой реализации

[hollanditkzn]

imdeveloper, Ну в принципе через on не доставляет мне труда делать

[imdeveloper]

hollanditkzn, да. по умолчанию придется скрывать. Используйте on

[Сергей delphinpro]

imdeveloper,

Другое дело если вы создадите этот слой в html - тогда вам подойдет и простой . click()

Вы заблуждаетесь. .click() - это просто алиас для .on('click')
Абсолютно то же самое.

Другое дело, если говорите о делегировании .on('click', '.selector', function(){}). Но вы об этом не упоминаете.