Как сделать всплывающую страницу
- Создание всплывающих окон на сайтах
- Простой способ создания всплывающих окон
- Код для создания всплывающего окна
- Для создания всплывающего окна вам потребуется следующий код:
- Настройка внешнего вида окна
- Размещение кода на странице
- Добавление возможности закрыть окно
- Другие варианты использования всплывающих окон
- Получение более красивого и интересного вида окна
- Видео по созданию всплывающих окон
- Видео по теме
Создание всплывающих окон на сайтах
При создании сайтов очень часто используются всплывающие окна в качестве меню, рекламных текстов и т.п. К тому же компактный вид позволяет экономить место на странице.
Простой способ создания всплывающих окон
Создание всплывающих страниц может производиться на основе JavaScript. Тем не менее, есть более простой вариант – использование языка разметки гипертекста HTML и языка таблиц CSS. Удобство заключается в том, что созданные таким образом окна будут поддерживаться большинством браузеров вне зависимости от того, поддерживают ли они JavaScript.
Код для создания всплывающего окна
Для создания всплывающего окна вам потребуется следующий код:
<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Нажать здесь!</span></a>
Настройка внешнего вида окна
Чтобы задать размеры окна, цвет и размер текста, фон и рамки, вы можете использовать атрибут style. Например:
<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'>Сообщение или текст во всплывающем окне</div>
Размещение кода на странице
Чтобы ваше всплывающее окно работало, вам нужно разместить две строчки кода между тегами вашей страницы <body> и </body>.
Добавление возможности закрыть окно
Если вы хотите, чтобы окно можно было закрыть, добавьте следующую ссылку перед тегом </div>:
<a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">закрыть</span></a>
Другие варианты использования всплывающих окон
Вы также можете создавать всплывающие окна, которые появляются при наведении курсора, а не по щелчку. Для этого используйте следующий код:
<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">наведите мышку сюда!</span></a>
Получение более красивого и интересного вида окна
Если вы владеете навыками программирования в JavaScript, вы можете создать более красивую и интересную страницу с всплывающим окном, используя различные фреймворки и библиотеки.
Видео по созданию всплывающих окон
Для более подробной информации и наглядного примера создания всплывающих окон на сайтах, вы можете посмотреть следующее видео:
