Positionnement d’un ModalPopup (VB)
par Christian Wenz
Le contrôle ModalPopup dans ajax Control Toolkit offre un moyen simple de créer une fenêtre contextuelle modale à l’aide de moyens côté client. Toutefois, le contrôle n’offre pas de fonctionnalité intégrée pour positionner la fenêtre contextuelle.
Vue d’ensemble
Le contrôle ModalPopup dans ajax Control Toolkit offre un moyen simple de créer une fenêtre contextuelle modale à l’aide de moyens côté client. Toutefois, le contrôle n’offre pas de fonctionnalité intégrée pour positionner la fenêtre contextuelle.
Étapes
Pour activer les fonctionnalités de ASP.NET AJAX et du Kit de ressources de contrôle, le ScriptManager. le contrôle doit être placé n’importe où sur la page (mais dans l’élément <form> ) :
<asp:ScriptManager ID="asm" runat="server" />
Ensuite, ajoutez un panneau qui sert de fenêtre contextuelle modale. Un bouton permet de fermer la fenêtre contextuelle :
<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>
Chaque fois que la fenêtre contextuelle s’affiche, elle doit être positionnée à un certain emplacement dans la page. Pour cette tâche, une fonction JavaScript côté client est créée. Il tente d’abord d’accéder au panneau. Si elle réussit, la position du panneau est définie à l’aide de CSS et de JavaScript (modifiez la position de la fenêtre contextuelle à volonté). Toutefois, le ModalPopupExtender contrôle tente également de positionner la fenêtre contextuelle. Par conséquent, le code JavaScript positionne à plusieurs reprises la fenêtre contextuelle, tous les dixièmes 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 setTimeout() méthode JavaScript est enregistrée dans une variable globale. Cela permet d’arrêter le positionnement répété de la fenêtre contextuelle à la demande, à l’aide de la clearTimeout() méthode :
function stopMoving()
{
clearTimeout(id);
}
</script>
Il ne vous reste plus qu’à faire appel à ces fonctions par le navigateur chaque fois que cela est approprié. La movePanel() fonction JavaScript doit être appelée lorsque vous cliquez sur le bouton qui déclenche le panneau :
<div>
<asp:Button ID="btn1" runat="server" Text="Launch Modal Popup"
OnClientClick="movePanel();" />
</div>
Et la stopMoving() fonction entre en jeu lorsque la fenêtre contextuelle est fermée, cela peut être déclenché dans le ModalPopupExtender contrôle :
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
OnOkScript="stopMoving();" />
La fenêtre contextuelle modale s’affiche à la position désignée (Cliquez pour afficher l’image en taille réelle)
