Модальное окно на JavaScript

Больше
6 мес. 3 нед. назад - 6 мес. 3 нед. назад #104 от roman
COM_KUNENA_MESSAGE_CREATED_NEW
Возникла необходимость сделать скелет формирования модального окна на JavaScript при нажатии кнопки на странице сайта (без использования Bootstrap и JQuery).
Модальное окно - это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию.

Рассмотрим, что получилось.
Вложения:
Last edit: 6 мес. 3 нед. назад by roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
6 мес. 3 нед. назад - 6 мес. 3 нед. назад #105 от roman
COM_KUNENA_MESSAGE_REPLIED_NEW
Код HTML
Прописываем ссылку, которая будет "открывать" модальное окно при нажатии кнопки. Модальное окно будет формироваться в элементе div id="myModal"
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]


Код CSS
Стили CSS являются обязательными для создания модального окна.
С помощью z-index мы указываем насколько модальное окно идентифицируется после нажатии ссылки "открыть", а также "закрыть". Также display: none, который позволяет скрывать модальное окно до нажатия ссылки.
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]


Код JavaScript
На JavaScript реализуем создание элемента div id="modal-content" в родительском элементе div id="myModal".
Далее в созданном элементе будет дополнительно создано 3 новых элемента div для вывода информации: header, body и footer.
В элементе header расположена кнопка закрытия окна close, которая скрывает модальное окно от пользователя (display = "none")
При новом открытии модального окна предварительно удаляются все элементы, которые были созданы в родительском элементе div id="myModal"
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
Last edit: 6 мес. 3 нед. назад by roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
6 мес. 3 нед. назад - 6 мес. 3 нед. назад #106 от roman
COM_KUNENA_MESSAGE_REPLIED_NEW
Представленный выше "скелет" модального окна можно использовать следующим образом:
1.В html-коде от кнопки Вы можете вызвать новую функцию, например, new_modal_user().
2.В JavaScript-коде добавить функцию new_modal_user(), которая запускает функцию "скелета" модального окна (open_modal()), а далее пишите необходимые изменения и дополнения.
Таким образом, Вы можете на базе open_modal() формировать много различных модальных окон с разной информацией.

ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
Last edit: 6 мес. 3 нед. назад by roman.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Время создания страницы: 0.190 секунд