Pozycjonowanie kontrolki ModalPopup (C#)
Autor: Christian Wenz
Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okienka podręcznego przy użyciu środków po stronie klienta. Jednak kontrolka nie oferuje wbudowanych funkcji umieszczania wyskakujących okienek.
Omówienie
Kontrolka ModalPopup w zestawie narzędzi AJAX Control Toolkit oferuje prosty sposób tworzenia modalnego okienka podręcznego przy użyciu środków po stronie klienta. Jednak kontrolka nie oferuje wbudowanych funkcji umieszczania wyskakujących okienek.
Kroki
Aby aktywować funkcjonalność ASP.NET AJAX i zestawu narzędzi Control Toolkit, ScriptManager. kontrolka musi być umieszczana 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 okienko 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 wyskakujące okienko, zostanie umieszczone w określonym miejscu na stronie. W tym zadaniu tworzona jest funkcja JavaScript po stronie klienta. Najpierw próbuje uzyskać dostęp do panelu. Jeśli to powiedzie się, 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 wyskakujące okienko, 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 wywołanie tych funkcji w przeglądarce za każdym razem, gdy jest to właściwe. movePanel() Po kliknięciu przycisku, który wyzwala panel, należy wywołać funkcję JavaScript:
<div>
<asp:Button ID="btn1" runat="server" Text="Launch Modal Popup"
OnClientClick="movePanel();" />
</div>
stopMoving() Funkcja jest odtwarzana 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 okienko podręczne jest wyświetlane na wyznaczonej pozycji (kliknij, aby wyświetlić obraz pełnowymiarowy)
