Posizionamento di un oggetto ModalPopup (VB)

di Christian Wenz

Scaricare il PDF

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.

Informazioni generali

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.

Gradi

Per attivare la funzionalità di ASP.NET AJAX e il Control Toolkit, occorre ScriptManager. il controllo deve essere inserito in un punto qualsiasi della pagina (ma all'interno dell'elemento <form> ):

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

Aggiungere quindi un pannello che funge da popup modale. Viene usato un pulsante 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. Tenta prima di tutto di accedere al pannello. Se ha successo, la posizione del pannello viene impostata usando CSS e JavaScript (modificare la posizione del popup a piacimento). Tuttavia, il ModalPopupExtender controllo cerca 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. Ciò consente di arrestare il posizionamento ripetuto del popup su richiesta, usando il clearTimeout() metodo :

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

Ora tutto ciò che resta da fare è fare sì che il browser chiami queste funzioni 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)