Positionnement d'une ModalPopup

Le contrôle ModalPopup de l'AJAX Control Toolkit offre une manière simple de créer une pop-up modale coté client. Toutefois, le contrôle ne propose pas de fonctionnalités de positionnement.
Voir une démo
Téléchargez le code de ce tutoriel

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Traduction

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

Étapes

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

 
Sélectionnez

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

 
Sélectionnez

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

 
Sélectionnez

<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() :

 
Sélectionnez

	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 :

 
Sélectionnez

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

 
Sélectionnez

<ajaxToolkit:Modalpop-upExtender ID="mpe" runat="server"      
	TargetControlId="btn1" pop-upControlID="ModalPanel" OkControlID="OKButton"      
	OnOkScript="stopMoving();" />
Image non disponible
La pop-up modale apparaît à la position désignée

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2009 Equipe Dotnet. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.