Самое простое модальное окно на 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 добавляются новые данные и основной шаблон перерисовывается.


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

Tags:
javascript,modal, modal dialog, google chrome

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.