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