Самое простое модальное окно на js

showDialog

Диалоговое окно которое сделает все само!

А если серьезно это маленькая библиотечка, а точнее там одна функция которая создает очень простое окно, где нет ничего лишнего.

Данный пример и все файлы на github

Разбор по шагам

Шаг 1.
В head нужно подключить два файла showDialog.js, showDialog.css
Шаг 2.
Функция showDialog принимает объект который может содержать следующие ключи

title — заголовок
message — сообщение или шаблон
data — данные которые будут вставлены в шаблон
buttons — кнопки

Hello world

Самый базовый пример
Два аргумента title и message (строка)

showDialog({
    title: 'Сообщение', 
    message: "Hello world"
})

message

message — может принимать несколько типов данных

1. строки
2. функции
3. промисы

Пример message — тип функция

showDialog({
    title: 'Ширина окна',
    message: () => document.body.offsetWidth
})

Пример message — тип промис

showDialog({
    title: 'json с сервера',
    message: fetch('https://jsonplaceholder.typicode.com/todos/1')
})

buttons

buttons — принимает объект

• где ключ надпись на кнопке
• а значение callback функция
  которая будет вызвана при нажатии на кнопку

Пример окна валидации

в message передадим строку в которой два input, у каждого input укажем атрибут name
(email и password)

showDialog({
    title: 'Авторизация', 
    message: `<input type="text" placeholder="Логин" name="email">
              <input type="password" placeholder="Пароль" name="password">`,
    buttons: {
        'Вход': function(data){
            // Проверка данных 
            console.log('Данные', data)
        },
         'Забыл пароль': function(data){
            // Сброс пароля
        }
    }
})

Получаем рабочее окно с двумя кнопками

При клике на [Вход] в консоли видим сообщение с данными которые мы ввели
при этом ключи это те самые "name" которые указали

data

data — это объект который встраивается в шаблон по ключам

К примеру в message мы можем указать строку как шаблон "Привет $name"

showDialog({
    title: 'data',
    message: 'Привет $name',
    data: {
        name: 'Вася'
    }
})

теперь добавим кнопку [Это не мое имя] при клике на эту кнопку выведем input где можно будет указать свое имя. Для этого можно воспользоваться встроенным методом right, для вызова боковой панели

showDialog({
    title: 'data',
    message: 'Привет $name',
    data: {
        name: 'Вася'
    },
    buttons: {
        'Это не мое имя': function(data) {
            this.right({
                message: `<input type='text' name='name' placeholder='Введите свое имя'>`
                })
            }
        }
    })

this.right принимает объект с ключами message и buttons
и по умолчанию добавляется кнопка "Сохранить".

При нажатии на эту кнопку в data добавляются новые данные и основной шаблон перерисовывается.

На этом пока все, спасибо за внимание.