Posizionamento di un controllo ModalPopup (C#)
Il controllo ModalPopup in AJAX Control Toolkit offre un modo semplice per creare un popup modale usando i mezzi lato client. Tuttavia, il controllo non offre una funzionalità predefinita per posizionare il popup.
Panoramica
Il controllo ModalPopup in AJAX Control Toolkit offre un modo semplice per creare un popup modale usando i mezzi lato client. Tuttavia, il controllo non offre una funzionalità predefinita per posizionare il popup.
Passaggi
Per attivare la funzionalità di ASP.NET AJAX e Control Toolkit, .ScriptManager il controllo deve essere inserito in qualsiasi punto della pagina (ma all'interno dell'elemento <form> ):
<asp:ScriptManager ID="asm" runat="server" />
Aggiungere quindi un pannello che funge da popup modale. Un pulsante viene usato per chiudere il popup:
<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>
Ogni volta che viene visualizzato il popup, deve essere posizionato in un determinato punto della pagina. Per questa attività viene creata una funzione JavaScript sul lato client. Prima di tutto tenta di accedere al pannello. Se l'operazione ha esito positivo, la posizione del pannello viene impostata usando CSS e JavaScript (modificare la posizione del popup in corrispondenza del messaggio). Tuttavia, il ModalPopupExtender controllo tenta anche di posizionare il popup. Pertanto, il codice JavaScript posiziona ripetutamente il popup, ogni decimo di secondo.
<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);
}
}
Come si può notare, il valore restituito del setTimeout() metodo JavaScript viene salvato in una variabile globale. In questo modo è possibile arrestare il posizionamento ripetuto del popup su richiesta, usando il clearTimeout() metodo :
function stopMoving()
{
clearTimeout(id);
}
</script>
A questo punto, tutto ciò che rimane da fare è quello di chiamare queste funzioni nel browser ogni volta che è appropriato. La movePanel() funzione JavaScript deve essere chiamata quando si fa clic sul pulsante che attiva il pannello:
<div>
<asp:Button ID="btn1" runat="server" Text="Launch Modal Popup"
OnClientClick="movePanel();" />
</div>
E la stopMoving() funzione entra in gioco quando il popup viene chiuso questo può essere attivato nel ModalPopupExtender controllo:
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
OnOkScript="stopMoving();" />
Il popup modale viene visualizzato nella posizione designata (fare clic per visualizzare l'immagine a dimensione intera)
