Главная Войти О сайте

Как сделать всплывающую страницу

Как сделать всплывающую страницу

Содержание:
  1. Создание всплывающих окон на сайтах
  2. Простой способ создания всплывающих окон
  3. Код для создания всплывающего окна
  4. Для создания всплывающего окна вам потребуется следующий код:
  5. Настройка внешнего вида окна
  6. Размещение кода на странице
  7. Добавление возможности закрыть окно
  8. Другие варианты использования всплывающих окон
  9. Получение более красивого и интересного вида окна
  10. Видео по созданию всплывающих окон
  11. Видео по теме

Создание всплывающих окон на сайтах

При создании сайтов очень часто используются всплывающие окна в качестве меню, рекламных текстов и т.п. К тому же компактный вид позволяет экономить место на странице.

Простой способ создания всплывающих окон

Создание всплывающих страниц может производиться на основе 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, вы можете создать более красивую и интересную страницу с всплывающим окном, используя различные фреймворки и библиотеки.

Видео по созданию всплывающих окон

Для более подробной информации и наглядного примера создания всплывающих окон на сайтах, вы можете посмотреть следующее видео:

Видео по теме


4Java.ru