Я действительно хотел сделать этот веб-сайт удобным для пользователя, разместив весь контент на одном сайте, без перехода пользователя на совершенно новую страницу. Мое решение состояло в том, чтобы модальное окно появлялось прямо поверх главной веб-страницы. В этом примере я поместил модальные окна для кнопок «О программе», «Контакты» и «Поужинать».
window.onload = function() {
// здесь ваш код
};
Функция запускается, когда загружается вся веб-страница.
Строки 4–6 присваивают имена переменных каждому модальному содержимому. Функция document.getElementById("id-name") найдет элемент с идентификатором, который указан в параметре.
Строки 8–10 присваивают имена переменных кнопкам, которые заставляют появляться модальные окна.
В строках 12–13 кнопкам закрытия присваиваются имена переменных. (Примечание: поскольку это функция document.getElementByClassName("class-name") с несколькими элементами, имеющими это имя класса, каждый из них имеет индекс для экземпляров, когда они были объявлены.)
element.onclick = function() {
// здесь ваш код
};
Функция запускается, когда пользователь нажимает на элемент.
element.стиль.отображение = “стиль”;
Эта функция устанавливает для элемента объявленный стиль. В этом примере модальное содержимое будет начинаться со стиля отображения «нет» (не будет видно пользователю), а затем изменится на «блокировать» после того, как пользователь нажмет кнопку.
Последняя функция в файле script.js позволяет пользователю закрыть модальное окно, щелкнув в любом месте веб-страницы.
Модальное содержимое для «о нас» будет размещено прямо под div фонового изображения.
Модальное содержимое для «контакта» будет размещено прямо под модальным окном «О программе».
А обед в модале будет размещен прямо под ним.
Наконец, не забудьте добавить идентификатор для кнопок.
И код анимации.
Webkit — это движок браузерного рендеринга для Safari и Chrome.
Правило @keyframes определяет код анимации. Эти анимации будут использоваться в стилях наших элементов.
Дополнительный стиль для модальных окон —
Источник I основан на: https://www.w3schools.com/howto/howto_css_modals.asp
