Positionnement d'une ModalPopup

| Christian Wenz | Philippe Vialatte (Traduction) |

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

- Titre : Positionnement d'une ModalPopup

- Auteurs : Christian Wenz, Philippe Vialatte (Traduction)

- Parution : 3 mai 2009

- Mise à jour : 3 mai 2009

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

Sommaire

- Traduction

- Étapes

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

<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