Positionieren eines ModalPopup-Steuerelements (VB)

von Christian Wenz

PDF herunterladen

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

Überblick

Das ModalPopup-Steuerelement im AJAX Control Toolkit bietet eine einfache Möglichkeit, ein modales Popup mit clientseitigen Mitteln 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, ist die ScriptManager. das -Steuerelement muss an einer beliebigen Stelle auf der Seite platziert werden (aber innerhalb des <form> -Elements):

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

Fügen Sie als Nächstes einen Bereich hinzu, der als modales Popup dient. Eine Schaltfläche wird verwendet, um das Popup zu schließen:

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

Jedes Mal, 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 wird versucht, auf den Bereich zuzugreifen. Wenn dies erfolgreich ist, wird die Position des Bereichs mithilfe von CSS und JavaScript festgelegt (ändern Sie die Position des Popups nach Be willen). ModalPopupExtender Das Steuerelement versucht jedoch auch, das Popup zu positionieren. Daher positioniert der JavaScript-Code das Popup wiederholt, alle zehntel Sekunden.

<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. Dies ermöglicht es, die wiederholte Positionierung des Popups bei Bedarf mit der clearTimeout() -Methode zu beenden:

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

Jetzt bleibt nur noch, dass der Browser diese Funktionen aufruft, wenn dies 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 kommt ins Spiel, wenn das Popup geschlossen wird, 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).

Zurück