Article complet: Ma modal popup ouvre plein de fenêtres !

Pour une fois, un post qui n'est pas *directement* relié à du .net ;)

Dans le cadre d'un projet de développement web, on à le scénario suivant, somme tout classique :

• une page doit afficher une popup
• la popup doit être modale
• la popup doit être pleine d'Ajax

Jusqu'ici, la réponse standard, c'est de faire une div invisible, qu'on va afficher au besoin avec le z-index qui va bien (avec le ModalPopupExtender, une popup jquery, ou en la refaisant à la main).

Tout ceci marche super bien pour une petite popup de confirmation, mais quand on arrive à 5 popup contenant des grilles ajaxifiées, des règles de validation et tout le tralala, la réactivité de la page descends en flèche, et on en vient à regretter d'avoir vendu le projet ;)

[Suite:]

Donc, du coup, la solution de repli, c'est de re-transformer les divs en "vraies" popup, et de les charger avec le code suivant :

       function openWindow(page, height, width){

           if (window.showModalDialog) {

               window.showModalDialog(page,null, "dialogWidth:" + width + "px;dialogHeight:" + height + "px");

           } else {

               var args = "height=" + height + ",width=" + width + ",toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no ,modal=yes";

               window.open(page+"?uniqueId=" + uniqueId, null, args);

           }

      }

Tout ceci fonctionne pour le mieux....

Jusqu'au moment ou on commence à utiliser les parties Ajaxifiées...

En effet, toute action de post ou de get dans une popup modale ouvre une nouvelle fenêtre, que ce soit sur un lien ou sur un post.incluant les actions effectuées dans un UpdatePanel.

Après pas mal de grattage de crâne, la solution est en fait toute simple. Il suffit en effet d'ajouter, dans le head de la page, cette petite ligne de code :

    [base target="_self" ]

Et tout re-fonctionne pour le mieux ;)

Juste une note en passant.cette méthode pour utiliser les popups à l'avantage annexe de bien séparer les composant pour des formes relativement compliquées avec des composants de plusieurs vendeurs (genre, une grille Telerik, un extender du control toolkit et un autocomplete maison.)