Модальное окно, которое можно вызвать везде. Чистый JS

Йоу-йоу! Занимался я очень долго одним проектом, в котором много JS и моё большое желание не использовать jQuery. И настал тот момент когда мне стало нужно вызывать модальное окно с разных кнопок. А еще нужно было динамически создавать модальное окно. И за место использования готовых модальных окон я решил сделать своё в объектно-ориентированном стиле. Наверное, для тех кому нужно такое всплывающие окно самое важное это как сделать вызов с разных кнопок. Об этом я и расскажу в первую очередь. 

Вызов модального окна с разных кнопок

Вообще подобная задача — это типичный пример делегирование события. И вот мой пример:

Думаю, что часть читателей этой статьи закроют её, так как уже поняли то, что им нужно. А для ленивых, которые не хотят возиться с кодом я выложил ссылку на github с примером и сейчас расскажу как этим пользоваться.

Установка и инициализация

Ни чего особенного делать не нужно, копируете код с моего github и вставляете из файла xmcmodal.js и подключаем его как обычный скрип. Приступим к инициализации. В файле на который я дал вам ссылку уже есть пример. Я расскажу что к чему. Смотрите код и комментарии

Конструктор получился очень гибким в нём можно указать всё что нужно, а потом динамически менять.

Расширение функционала

Сейчас в моём модальном окне 149 строк кода если считать с пробелами. Но в конечном счёте, в моём проекте оно выросло до 367 строк и я рад этому. В начале моего проекта мне нужно было просто модальное окно. Но потом мне понадобилось загружать в него форму с contact form 7 по ajax, так же и отправлять данные, валидировать форму, переводить форму на 2 языка, проверять куки. И с XMC (название моего модального окна) это очень просто, потому что ты не ищешь элементы, ты не назначаешь множество переменных у тебя всё храниться внутри объекта и ты имеешь доступ к его данным. Вот например как я сделал ajax-запрос формы:

this.body — это основной блок «модалки», в которую по ajax подгружаю форму. А сам ajax я вызываю initBackground() в условии если задний слой равен null. Этим я достигаю того, что ajax формы делается один раз, а не каждый раз как происходит нажатие.