Ouvrir une page en mode modal

L’ouverture d’une page en mode modal se fait grâce à la fonction openModal(). Voici la procédure :

Préambule #

1. Procédez comme d’habitude pour créer les 3 pages (html pour le design, xml pour les données, asp pour les traitements) en suivant les recommandations d’usage.
2. Vérifiez que la page fonctionne correctement lorsqu’elle est appelée normalement (en saisissant son url).
3. Effectuez tous les tests nécessaires au fonctionnement de la page en mode non-modal; Ainsi, vous aurez la garantie qu’en cas de bug, c’est bien l’affichage en modal qui en est la cause et non la page elle-même.

Transformation en modale #

4. Ajoutez l’élément <pageName> dans le ficher XML en mettant dans l’attribut value, le nom de la page en cours (sans extension). Par exemple <pageName value="messagesSent"></pageName>
5. Placer la fonction openModal() avec ses paramètres, dans le code (en général sur le clic d’un lien ou d’un bouton).

Syntaxe :

openModal(pUrl, pWidth, pHeight, withCloseButton)

pUrl : url de la page avec l’extension .asp
pWidth : Largeur de la modale sous l’une des 4 formes : "modal-xl", "modal-lg", "modal-md", "modal-sm"
pHeight : hauteur de la modale sous l’une des deux formes : « h-100 », « h-75 »
withCloseButton : détermine si le boutons de fermeture de la fenêtre dois être affiché ou pas (La valeur par défaut est true)

Exemple :

<a href='JavaScript:openModal("messagesSent.asp","modal-md","h-75", false)'>Messages envoyés</a>

Traitement des scripts #

Si la page à afficher en modal contient des scripts, il y a quelques précautions à prendre et deux éléments à ajouter :

Précautions #

• La première précaution est d’éviter tout script qui agirait sur document.location ou d’autres parties de la fenêtre, car lorsque la modale s’ouvre, il ne s’agit pas d’une fenêtre avec son propre document, elle est chargée comme une sous-partie du document principal. Il convient donc, comme toujours, d’utiliser l’ilot des données, les variables, etc.

• La balise <pageName>, qui est recommandée dans tous les fichier XML, est NECESSSAIRE pour le bon fonctionnemet des modales.

élements à ajouter #

• Afin que les scripts soient chargés sur la page, il convient d’ajouter l’id « modalToo » à la balise Script

• l’évènement $(document).ready() ne se produit pas lorsque la modale s’ouvre, car ce n’est pas un document, c’est un div qui est ajouté au document. La fonction afterModalOpen() sert donc à palier à ce problème. Si la fonction $(document).ready() contient uniquement un populate(), il n’est pas nécessaire de créer la fonction afterModalOpen(). En revanche, si populate() est suivi d’insctructions, la fonction afterModalOpen() devient indispensable, mais il suffit de copier à l’intérieur le même code que $(document).ready(), à l’exception de populate() si elles apparaît en première ligne.
• La fonction afterModalClose s’exécute lorsque la modale est fermée (quel que soit le bouton).

Il est inutile de créer des fonctions vides. La présence de ces fonctions sur la page n’est nécessaire que s’il y a des instructions à exécuter sur l’ouverture ou la femreture de la modale.

<div id="scripts">
  <script id="modalToo">
          //<![CDATA[

            var message, nbMessagesSent
            nbMessagesSent = Number(getValue("user.NbMessagesSent"))

            $(document).ready(){
               populate()
               displayMessage(nbMessagesSent)
            }

            // Cette fonction est l'équivalent de $(document).ready() concernant les modales
            // Il faut copier dedans tout ce qui se trouve dans $(document).ready()
            // A l'exception de de populate(), qui est automatiquement appelé à la fin de openModal()
            function afterModalOpen() {
                displayMessage(nbMessagesSent)
            }

            function afterModalClose() {
                console.log("fermeture de la modale")
            }

            function displayMessage(position) {
                    ...
            }
          //]]>
  </script>
</div>