Positionieren eines ModalPopup (VB)

von Christian Wenz

PDF herunterladen

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mithilfe clientseitiger Mittel zu erstellen. Das Steuerelement bietet jedoch keine integrierte Funktionalität zum Positionieren des Popups.

Übersicht

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mithilfe clientseitiger Mittel zu erstellen. Das Steuerelement bietet jedoch keine integrierte Funktionalität zum Positionieren des Popups.

Schritte

Um die Funktionalität von ASP.NET AJAX und dem Control Toolkit zu aktivieren, verwenden Sie ScriptManager. Steuerelement muss an einer beliebigen Stelle auf der Seite (aber innerhalb des <form> Elements) platziert werden:

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

Fügen Sie als Nächstes ein Panel hinzu, das als modales Popup dient. Zum Schließen des Popups wird eine Schaltfläche verwendet:

<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>

Wenn das Popup angezeigt wird, muss es an einer bestimmten Stelle auf der Seite positioniert werden. Für diese Aufgabe wird eine clientseitige JavaScript-Funktion erstellt. Zuerst versucht es, auf das Panel zuzugreifen. Wenn dies erfolgreich ist, wird die Position des Panels mit CSS und JavaScript festgelegt (ändern Sie die Position des Popups bei Willen). ModalPopupExtender Das Steuerelement versucht jedoch auch, das Popup zu positionieren. Daher positioniert der JavaScript-Code das Popup wiederholt, alle zehntel einer Sekunde.

<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);
 }
 }

Wie Sie sehen können, wird der Rückgabewert der setTimeout() JavaScript-Methode in einer globalen Variablen gespeichert. Dadurch kann die wiederholte Positionierung des Popups bei Bedarf mithilfe der clearTimeout() Methode beendet werden:

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

Jetzt ist nur noch der Browser so einzurichten, dass er diese Funktionen immer dann aufruft, wenn es angebracht ist. Die movePanel() JavaScript-Funktion muss aufgerufen werden, wenn auf die Schaltfläche geklickt wird, die den Bereich auslöst:

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

Und die stopMoving() Funktion tritt in Kraft, wenn das Popup geschlossen wird; dies kann im ModalPopupExtender Steuerelement ausgelöst werden.

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

Das modale Popup wird an der angegebenen Position angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)