Udostępnij za pośrednictwem

Pozycjonowanie kontrolki ModalPopup (VB)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okna podręcznego przy użyciu środków po stronie klienta. Jednak kontrolka nie oferuje wbudowanej funkcji do umieszczania wyskakujących okienek.

Omówienie

Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okna podręcznego przy użyciu środków po stronie klienta. Jednak kontrolka nie oferuje wbudowanej funkcji do umieszczania wyskakujących okienek.

Kroki

Aby aktywować funkcje ASP.NET AJAX i Zestawu narzędzi Control Toolkit, .ScriptManager kontrolkę należy umieścić w dowolnym miejscu na stronie (ale w elemecie <form> ):

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

Następnie dodaj panel, który służy jako modalne okno podręczne. Przycisk służy do zamykania wyskakującego okienka:

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

Za każdym razem, gdy zostanie wyświetlone okno podręczne, zostanie umieszczone w określonym miejscu na stronie. W tym zadaniu jest tworzona funkcja JavaScript po stronie klienta. Najpierw próbuje uzyskać dostęp do panelu. Jeśli to się powiedzie, pozycja panelu zostanie ustawiona przy użyciu arkuszy CSS i JavaScript (zmień położenie wyskakującego okienka). Jednak kontrolka ModalPopupExtender próbuje również umieścić wyskakujące okienko. W związku z tym kod JavaScript wielokrotnie umieszcza okienko podręczne, co dziesiątą 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ć, zwracana wartość setTimeout() metody JavaScript jest zapisywana w zmiennej globalnej. Dzięki temu można zatrzymać wielokrotne pozycjonowanie wyskakujących okienek na żądanie przy użyciu clearTimeout() metody :

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

Teraz wszystko, co pozostało do zrobienia, to, aby przeglądarka wywołała te funkcje zawsze, gdy jest to odpowiednie. Funkcja movePanel() JavaScript musi być wywoływana po kliknięciu przycisku wyzwalającego panel:

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

stopMoving() Funkcja wchodzi w grę po zamknięciu wyskakującego okienka, które można wyzwolić w kontrolceModalPopupExtender:

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

Modalne wyskakujące okienko pojawia się na wyznaczonym miejscu

Modalne wyskakujące okienko jest wyświetlane na wyznaczonym miejscu (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Poprzednie