Размещение ModalPopup (VB)

Кристиан Венц

Скачать в формате PDF

Элемент управления ModalPopup в наборе средств управления AJAX предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств. Однако элемент управления не предлагает встроенные функции для размещения всплывающего окна.

Обзор

Элемент управления ModalPopup в наборе средств управления AJAX предоставляет простой способ создания модального всплывающего окна с помощью клиентских средств. Однако элемент управления не предлагает встроенные функции для размещения всплывающего окна.

Шаги

Чтобы активировать функциональные возможности ASP.NET AJAX и набора средств управления, необходимо ScriptManager. элемент управления должен быть помещен в любое место на странице (но внутри элемента <form>).

<asp:ScriptManager ID="asm" runat="server" />

Затем добавьте панель, которая выступает в качестве модального всплывающего окна. Кнопка используется для закрытия всплывающего окна:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

При отображении всплывающего окна оно должно находиться в определенном месте на странице. Для этой задачи создается клиентская функция JavaScript. Сначала он пытается получить доступ к панели. В случае успешного выполнения позиция панели устанавливается с помощью CSS и JavaScript (например, измените положение всплывающего окна по своему усмотрению). Однако элемент управления ModalPopupExtender также пытается разместить всплывающее окно. Поэтому код JavaScript неоднократно помещает всплывающее окно, каждую десятую часть секунды.

<script type="text/javascript">
 var id = null;
 function movePanel() 
 {
 var pnl = $get("ModalPanel");
 if (pnl != null) 
 {
 pnl.style.left = "50px";
 pnl.style.top = "50px";
 id = setTimeout("movePanel();", 100);
 }
 }

Как видно, возвращаемое значение setTimeout() метода JavaScript сохраняется в глобальной переменной. Это позволяет прекратить повторную установку позиции всплывающего окна по запросу с помощью метода clearTimeout().

function stopMoving() 
 {
 clearTimeout(id);
 }
</script>

Теперь все, что осталось сделать, заключается в том, чтобы браузер вызывал эти функции всякий раз, когда это необходимо. Функция movePanel() JavaScript должна вызываться при нажатии кнопки, которая активирует панель:

<div>
 <asp:Button ID="btn1" runat="server" Text="Launch Modal Popup" 
 OnClientClick="movePanel();" />
</div>

Функция stopMoving() вступает в игру при закрытии всплывающего окна, что активируется в элементе управления ModalPopupExtender.

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
 OnOkScript="stopMoving();" />

Модальное всплывающее окно отображается в указанной позиции (щелкните, чтобы просмотреть изображение полного размера)