Автор КакПросто!
Как сделать всплывающее окно в HTML
Создание всплывающего окна в HTML производиться с использованием библиотеки JQuery, которая позволяет интегрировать на web-страницу обработчик событий и тем самым дать возможность отобразить активное содержимое сайта.
Инструкция
Откройте вашу страницу сайта на HTML в текстовом редакторе, который вы используете для написания нужного кода. Для вставки всплывающего окна вы также можете воспользоваться стандартной утилитой Windows «Блокнот». Для этого кликните правой клавишей мыши на файле HTML и выберите «Открыть с помощью» - «Блокнот».
В секции документа создайте слой, который будет обрабатывать JQuery:
<div id = “show” class = “show”>
Затем необходимо задать название всплывающего окна. Для этого можно воспользоваться разноуровневыми заголовками HTML:
<h3>Заголовок окна</h3>
После этого задайте текст, который будет отображаться в окне с применением скрипта для создания абзаца:
<div><p>Текст</p>
Затем создайте слой с классом close_win для закрытия всплывающего окна, перед этим закрыв предыдущий дескриптор:
</div><a class = “close_win”>Закрыть окно
Подключите библиотеку jQuery в файле, прописав нужный тег между дескрипторами документа. Например:
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
После этого введите код для отображения всплывающего окна:
<script>
$(function() {
$(‘#show’).hide();
Затем необходимо обработать событие нажатия пользователем клавиши мыши для вызова всплывающего окна и обработать закрытие окна. Для этого впишите следующий код:
$(‘#click-me’).click(function() { $(‘#show’).fadein(300); } )
$(‘#close_win’).click(function() { $(‘#show’).fadeOut(300); } )
</script> })
Данная программа обрабатывает нажатия пользователем клавиш вызова всплывающего окна и нажатие на ссылку для его закрытия.
Для отображения всплывающего окна на странице вы можете воспользоваться ссылкой класса click-me, который был задан в коде выше. Для этого в теле документа введите следующий код:
<a class = “click-me”>Нажмите для показа всплывающего окна</a>
Полезный совет
Для изменения внешнего вида окна вы можете воспользоваться кодом на основе CSS, при знании которого вы сможете обработать соответствующие классы и задать им любой внешний вид.
