| 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 |
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.
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.
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 (Click to view full-size image)
[!div class="step-by-step"] Previous