Как сделать всплывающее окно в HTML?

Создание всплывающего окна в HTML производиться с использованием библиотеки JQuery, которая позволяет интегрировать на web-страницу обработчик событий и тем самым дать возможность отобразить активное содержимое сайта.

Инструкция

Откройте вашу страницу сайта на HTML в текстовом редакторе, который вы используете для написания нужного кода. Для вставки всплывающего окна вы также можете воспользоваться стандартной утилитой Windows «Блокнот». Для этого кликните правой клавишей мыши на файле HTML и выберите «Открыть с помощью» - «Блокнот».

В секции документа создайте слой, который будет обрабатывать JQuery:

Затем необходимо задать название всплывающего окна. Для этого можно воспользоваться разноуровневыми заголовками HTML:

Заголовок окна

После этого задайте текст, который будет отображаться в окне с применением скрипта для создания абзаца:

Текст

Затем создайте слой с классом close_win для закрытия всплывающего окна, перед этим закрыв предыдущий дескриптор:Закрыть окно

Подключите библиотеку jQuery в файле, прописав нужный тег между дескрипторами документа. Например:

После этого введите код для отображения всплывающего окна:$(function() {$(‘#show’).hide();

Затем необходимо обработать событие нажатия пользователем клавиши мыши для вызова всплывающего окна и обработать закрытие окна. Для этого впишите следующий код:$(‘#click-me’).click(function() { $(‘#show’).fadein(300); } )$(‘#close_win’).click(function() { $(‘#show’).fadeOut(300); } )</script> })Данная программа обрабатывает нажатия пользователем клавиш вызова всплывающего окна и нажатие на ссылку для его закрытия.

Для отображения всплывающего окна на странице вы можете воспользоваться ссылкой класса click-me, который был задан в коде выше. Для этого в теле документа введите следующий код:Нажмите для показа всплывающего окна

Оцените статью!