Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
55 lines (34 sloc) 3.28 KB
uid title author description ms.author ms.date ms.assetid msc.legacyurl msc.type
web-forms/overview/ajax-control-toolkit/modalpopup/positioning-a-modalpopup-vb
Positioning a ModalPopup (VB) | Microsoft Docs
wenz
The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. However the control does not offer a...
riande
06/02/2008
8a07210c-eb0e-485e-9ee8-82a101520e65
/web-forms/overview/ajax-control-toolkit/modalpopup/positioning-a-modalpopup-vb
authoredcontent

Positioning a ModalPopup (VB)

by Christian Wenz

Download Code or Download PDF

The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. However the control does not offer a built-in functionality to position the popup.

Overview

The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. However the control does not offer a built-in functionality to position the popup.

Steps

In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager. control must be put anywhere on the page (but within the <form> element):

[!code-aspxMain]

Next, add a panel which serves as the modal popup. A button is used to close the popup:

[!code-aspxMain]

Whenever the popup is shown, it shall be positioned at a certain place in the page. For this task, a client-side JavaScript function is created. It first tries to access the panel. If it succeeds, the panel's position is set using CSS and JavaScript (change the position of the popup at will). However the ModalPopupExtender control also tries to position the popup. Therefore, the JavaScript code repeatedly positions the popup, every tenth of a second.

[!code-htmlMain]

As you can see, the return value of the setTimeout() JavaScript method is saved in a global variable. This allows to stop the repeated positioning of the popup on demand, using the clearTimeout() method:

[!code-javascriptMain]

Now all that is left to do is to make the browser call these functions whenever appropriate. The movePanel() JavaScript function must be called when the button is clicked that triggers the panel:

[!code-aspxMain]

And the stopMoving() function comes into play when the popup is closed this can be triggered in the ModalPopupExtender control:

[!code-aspxMain]

The modal popup appears at the designated position

The modal popup appears at the designated position (Click to view full-size image)

[!div class="step-by-step"] Previous

You can’t perform that action at this time.