Pozycjonowanie kontrolki ModalPopup (C#)

Autor Christian Wenz

Pobierz kod lub Pobierz plik PDF

Kontrolka kontrolki modalpopup w zestawie narzędzi AJAX Control oferuje prosty sposób tworzenia modalnego podręcznego przy użyciu metod po stronie klienta. Jednak formant nie oferuje wbudowanej funkcji do pozycjonowania okna podręcznego.

Omówienie

Kontrolka kontrolki modalpopup w zestawie narzędzi AJAX Control oferuje prosty sposób tworzenia modalnego podręcznego przy użyciu metod po stronie klienta. Jednak formant nie oferuje wbudowanej funkcji do pozycjonowania okna podręcznego.

Kroki

W celu aktywowania funkcji ASP.NET AJAX i zestawu narzędzi sterowania ScriptManager. Kontrolka musi być umieszczona w dowolnym miejscu na stronie (ale w obrębie elementu <form>):

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

Następnie Dodaj panel, który służy jako modalne menu podręczne. Przycisk jest używany do zamykania okna podręcznego:

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

Gdy zostanie wyświetlone okno podręczne, będzie ono umieszczane w określonym miejscu na stronie. W przypadku tego zadania zostanie utworzona funkcja JavaScript po stronie klienta. Najpierw próbuje uzyskać dostęp do panelu. Jeśli to się powiedzie, pozycja panelu jest ustawiana za pomocą CSS i JavaScript (Zmień położenie okna podręcznego w programie). Jednak formant ModalPopupExtender próbuje również umieścić okno podręczne. W związku z tym kod JavaScript wielokrotnie umieszcza okno podręczne, co dziesiąte części sekundy.

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

Jak widać, wartość zwracana setTimeout() Metoda JavaScript jest zapisywana w zmiennej globalnej. Pozwala to zatrzymać powtarzające się pozycjonowanie okna podręcznego na żądanie przy użyciu metody clearTimeout():

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

Teraz wszystko, co pozostało do zrobienia, ma mieć możliwość wywołania tych funkcji w przeglądarce w miarę potrzeb. Funkcja movePanel() JavaScript musi być wywoływana, gdy kliknięto przycisk, który wyzwala panel:

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

A funkcja stopMoving() jest odtwarzana po zamknięciu okna podręcznego, może być wyzwalane w kontrolce ModalPopupExtender:

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

modalny podręczny jest wyświetlany w wyznaczeniu pozycji

Modalne menu podręczne pojawia się w wydzielonym miejscu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)