Positionnement d'une ModalPopup

Cet article est la traduction la plus fidèle possible de l'article original : Positioning a Modalpop-up

Afin d'activer les fonctionnalités d'ASP.NET AJAX, et du Control Toolkit, le contrôle ScriptManager doit être placé sur la page, n'importe où (mais dans l'élément <form>) :

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

Ensuite, ajouter un panneau qui servira de pop-up modal. Un bouton est utilisé pour fermer la fenêtre :

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

Lorsque la fenêtre est affichée, elle doit être placée à un certain endroit dans la page. Pour cette tâche, une fonction JavaScript côté client est créée. Elle tente d'abord d'accéder au panneau. Si elle réussit, la position du panneau est modifiée à l'aide de CSS et JavaScript. Toutefois, le contrôle Modalpop-upExtender tente également de positionner la fenêtre pop-up. Par conséquent, le code JavaScript va devoir repositionner la pop-up, chaque dixième de seconde.

<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);           
		}      
	}

Comme vous pouvez le voir, la valeur de retour de la méthode JavaScript setTimeout() est enregistrée dans une variable globale. Cela permet d'arrêter la répétition du positionnement de la pop-up à la demande, en utilisant la méthode clearTimeout() :

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

Maintenant, tout ce qui reste à faire est de faire appeler ces fonctions par le navigateur lorsque l'on en à besoin. La fonction JavaScript movePanel() doit être appelée lorsque l'on clique le bouton qui déclenche l'affichage du panneau :

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

Et la fonction stopMoving() entrera en jeu lorsque le pop-up sera fermé (ce qui peut être déclenché dans le contrôle Modalpop-upExtender) :

<ajaxToolkit:Modalpop-upExtender ID="mpe" runat="server"      
	TargetControlId="btn1" pop-upControlID="ModalPanel" OkControlID="OKButton"      
	OnOkScript="stopMoving();" />