Отображение всплывающего окна на странице

Модальные всплывающие окна были одним из первых эффектов JavaScript, широко принятых на вооружение такими веб?сайтами, как Google и Amazon, которые стремились повысить степень интерактивности при взаимодействии со своими клиентами. Функция window.alert() реализует этот эффект, но внешний вид и содержимое такого всплывающего окна не могут быть изменены. Благодаря каскадным таблицам стилей (CSS) и объектной модели документа (DOM) ныне существует возможность создавать более интересные всплывающие окна без необходимости создавать новые.

Модальное всплывающее окно обычно воспроизводится за счет создания нового элемента DOM (как правило, в виде контейнера
), затем с помощью JavaScript элемент отображается на экране, а с помощью CSS настраивается его внешний вид. Чтобы всплывающее окно сделать модальным, создаем второй элемент
, который будет покрывать всю область, отображаемую броузером. Затем с помощью CSS-свойства z?order (которое определяет значение виртуальной координаты z элемента и позволяет создавать эффект расположения одного элемента над другим) оба элемента размещаются над текущим содержимым страницы – сначала располагается элемент
, «охватывающий всю область отображения», а над ним – элемент
с содержимым всплывающего окна.


О размещении компонентов позаботится платформа ASP.NET AJAX, а вам остается реализовать все остальное.

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

Первый шаг на пути реализации такого окна заключается в том, чтобы создать соответствующие классы CSS. Нам потребуется два таких класса: один для всплывающего окна и второй для элемента
, охватывающего всю видимую область. Для первого класса мы просто определим параметры рамки, цвет фона и ширину окна (высота определяется механизмом отображения броузера автоматически):
.popup {
border: solid;
background?color: yellow;
width: 200px;
}

Во втором классе также будет использоваться цвет фона, например серый, но при этом мы еще зададим степень прозрачности, чтобы фон (содержимое страницы) просвечивал сквозь элемент
. Для создания подобного эффекта в Internet Explorer поддерживается свойство filter, во всех остальных броузерах – opacity.
.content {
background?color: grey;
filter: alpha(opacity=50);
opacity: 0.5;
}

Далее нам потребуется серверный элемент управления, который будет отображать модальное всплывающее окно.


Для этого подойдет ссылка:
(asp:HyperLink ID="HyperLink1"
runat="server" Text="More ..." NavigateUrl="#" /)

Теперь создадим само всплывающее окно. Как показано ниже, это будет диалог, предлагающий пользователю зарегистрироваться:
(asp:Panel ID="popupPanel" runat="server" CssClass="popup")

Login to get more information!

User ? Password


(/asp:Panel)

И наконец, в игру вступает ModalPopupExtender из пакета ASP.NET AJAX Control Toolkit. Этот расширитель позволяет создавать модальные всплывающие окна, расположенные поверх текущего содержимого страницы. Здесь придется немного поработать. Вам потребуются
следующие свойства элемента ModalPopupExtender:
BackgroundCssClass
Класс CSS, благодаря которому содержимое страницы будет выглядеть неактивным
PopupControlID
Значение атрибута ID элемента, который будет выполнять роль всплывающего окна
TargetControlID
Значение атрибута ID элемента, который будет запускать отображение окна
OKControlID
Значение атрибута ID элемента, который будет закрывать окно

Полный программный код реализации приводится в примере 12.7.
Пример 12.7.


Использование ModalPopupExtender
ModalPopup.aspx
<%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1?transitional.dtd"> ASP.NET AJAX


(body)
(asp:ScriptManager ID="ScriptManager1" runat="server" /)
(asp:Panel ID="contentPanel" runat="server")

Chapter 1 gives a high?level overview of Ajax and the ASP.NET AJAX
framework and then covers the installation of ASP.NET AJAX, a review of its
structure, and a first simple example.


Chapter 2 is a concise introduction to JavaScript. Although Atlas
does its best to hide the details from ASP.NET programmers, a certain
knowledge of JavaScript is required to really master ASP.NET AJAX.


Chapter 3 explains the technologies beyond the hype.


You learn what
happens in the background, how Ajax works, and what it really is all about,
in fewer than 20 pages.


(asp:HyperLink ID="HyperLink1" runat="server" Text="More ..."
NavigateUrl="#" /)


(/asp:Pane)
(asp:Panel ID="popupPanel" runat="server" CssClass="popup")

Login to get more information!

User ? Password


(/asp:Panel)
(ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="popupPanel" TargetControlID="HyperLink1"
OkControlID="Button1" BackgroundCssClass="content" /)

(/body)


Оцените статью: (0 голосов)
0 5 0

Статьи из раздела ASP.NET AJAX на эту тему:
Борьба со спамом в блогах и других формах ввода информации
Динамическая свертка единственной панели
Добавление функции автодополнения к элементу управления TextBox
Присоединение календаря к текстовому полю
Создание интерфейса с вкладками