Umístění ovládacího prvku ModalPopup (C#)

Christian Wenz

Stáhnout PDF

Ovládací prvek ModalPopup v sadě nástrojů AJAX Control Toolkit nabízí jednoduchý způsob, jak vytvořit modální automaticky otevírané okno pomocí prostředků na straně klienta. Ovládací prvek ale nenabízí integrovanou funkci pro umístění automaticky otevíraných oken.

Přehled

Ovládací prvek ModalPopup v sadě nástrojů AJAX Control Toolkit nabízí jednoduchý způsob, jak vytvořit modální automaticky otevírané okno pomocí prostředků na straně klienta. Ovládací prvek ale nenabízí integrovanou funkci pro umístění automaticky otevíraných oken.

Postup

Aby bylo možné aktivovat funkce ASP.NET AJAX a Control Toolkit, .ScriptManager ovládací prvek musí být umístěn kdekoli na stránce (ale v rámci elementu <form> ):

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

Dále přidejte panel, který slouží jako modální automaticky otevírané okno. K zavření automaticky otevírané nabídky se používá tlačítko:

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

Při každém zobrazení se automaticky otevírané okno umístí na určité místo na stránce. Pro tuto úlohu se vytvoří funkce JavaScriptu na straně klienta. Nejprve se pokusí o přístup k panelu. Pokud se to podaří, pozice panelu se nastaví pomocí šablon stylů CSS a JavaScriptu (podle potřeby změňte umístění automaticky otevíraného okna). Ovládací prvek se ModalPopupExtender však také pokusí umístit automaticky otevírané okno. Proto kód JavaScriptu opakovaně umístí automaticky otevírané okno, každou desátou sekundu.

<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 vidíte, návratová hodnota javascriptové setTimeout() metody je uložena v globální proměnné. To umožňuje zastavit opakované umístění automaticky otevíraného okna na vyžádání pomocí clearTimeout() metody:

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

Teď už zbývá jen to, aby prohlížeč volal tyto funkce, kdykoli je to vhodné. Funkce movePanel() JavaScriptu se musí volat při kliknutí na tlačítko, které aktivuje panel:

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

stopMoving() A funkce přichází do hry, když je automaticky otevírané okno zavřené, což může být aktivováno v ovládacím ModalPopupExtender prvku:

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

Modální automaticky otevírané okno se zobrazí na určeném místě (kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší