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

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

Рассмотрим, что получилось.
Вложения:
Последнее редактирование: 1 год 3 мес. назад пользователем roman.

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

Больше
1 год 3 мес. назад - 1 год 3 мес. назад #105 от roman
roman ответил в теме Модальное окно на JavaScript
Код 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"
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
Последнее редактирование: 1 год 3 мес. назад пользователем roman.

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

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

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

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

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