Positionnement d'une ModalPopup

Date de publication : 03 mai 2009 , Date de mise à jour : 03 mai 2009

Par Christian Wenz
 Philippe Vialatte (Traduction) (ma page DVP) (Blog)
 

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

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Traduction
Étapes


Traduction

Cet article est la traduction la plus fidèle possible de l'article original : en  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>) : 

<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();" />
La pop-up modale apparaît à la position désignée


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

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. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Microsoft DotNET

Blogs

Hébergement

 
Partenaires

Hébergement Web