Вставить код всплывающего модального окна на Java Script можно одним из способов:
- разместить код на странице;
- подключить свой js-файл;
- подключить внешний файл стороннего ресурса.
Прежде чем, перейдем к пошаговым инструкциям каждого из способов, узнаем из чего состоит модальное окно или, как его ещё часто называют "попап" (pop-up).
Структура всплывающего окна
Модальное всплывающее окно состоит из:
1. html тегов и текстового сообщения, которые размещают на странице сайта. Здесь могут также быть изображения и другие элементы. Теги и текст могут выглядеть так:
<div class='popup'>
<div class='contentBox'>
<div class='close'></div>
<div class='img'>
<img src='путь к изображению'>
</div>
<div class='content'>
<h3>Заголовок</h3>
<p>текст</p>
<h3><a href='ссылка'>Кнопка
</a></h3>
</div>
</div>
</div>2. Стилей css, которые определяют правила того, как должны выглядеть элементы html-кода. Они могут содержать такую информацию:
.popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
display:none;
z-index:9999999 !important;
}Здесь position:fixed фиксирует окно на странице, независимо от прокрутки, top и left задают расположение относительно верха и левой стороны соответственно и так далее.
3. Скрипта написанного на Java Script, который может содержать такие элементы, как:
let popup=document.querySelector('.popup');
let close=document.querySelector('.close');
...Для корректной работы скрипта нужно разместить все три составляющих одним из удобных для вас способов.
Вставить код Java Script только в html страницы сайта
В этом варианте мы размещаем все данные на странице. Этот способ подключения подходит для сайтов, написанных на чистом html, а также если у вас нет доступна к файлам.
1. Сначала css стили. Откройте нужную страницу в редакторе. Вверху пропишите стили между тегами <style>...</style>.
2. Потом теги и текст. Вставьте html-теги и текст
3. Затем скрипт. Добавьте скрипт между тегами <script>...</script>.
Выглядеть это будет так:
<style>
.popup{
position:fixed; top:50%; left:50%;
transform:translate(-50%, -50%);
display:none; z-index:9999999 !important;
}
</style>
<div class='popup'>
<div class='contentBox'>
<div class='close'></div>
<div class='img'>
<img src='путь к изображению'>
</div>
<div class='content'>
<h3>Заголовок</h3>
<p>текст</p>
<h3><a href='ссылка'>Кнопка
</a></h3>
</div>
</div>
</div>
<script>
const popup = document.querySelector('.popup');
const close = document.querySelector('.close');
...
</script>
Как вы понимаете, стили css и скрипт js можно вынести в отдельные файлы, оба или какой-либо один. Сделать это можно при доступе к файлам сайта через хостера. Помещать файлы следует в публичную папку, которая открыта для исполнения. В этом случае вид html-страницы немного меняется.
Подключить код всплывающего окна Java Script через файл
1. Положите файл стилей с расширением .css на сервер (желательно в отдельно созданную для этого папку).
2. Положите файл скрипта с расширением .js на сервер.
3. Ставьте html-теги на страницу
4. Пропишите в начале страницы над html-тегими путь к файлу стилей:
<link rel='stylesheet' type='text/css' href='/popup.css'>
5. Пропишите путь к файлу скрипта внизу страницы, под html-тегими:
<script src="/ваша папка/script.js"> </script>
Подключить код Java Script файл стороннего ресурса
Если сторонний ресурс позволяет использовать свои стили и скрипты, то вы поступаете аналогично второму способу, только меняете путь со своего сайта на ссылку, указывающую на другой сайт. Например,
<link rel="stylesheet" href="https://unicons.iconscout.com/ release/v3.0.6/css/line.css">
Здесь сайт iconscout.com выступает донором стилей для html-элементов.
Рекомендую просмотреть:
Пример работы информационного окна в статье о Digital Nomad
Как вставить js скрипт на сайт WordPress
Комментарии