Boite modale

Pseudo boîte modale

Dans une appli web en XUL, il n'est pas possible d'appeler window.openDialog (problème de privilège), et donc de faire des vraies boites modales.

Il existe cependant une alternative. L'idée est d'intégrer le contenu d'une boite de dialogue dans une div html dans le fichier xul principal. Cette div html sera positionnée de façon absolue, et prendra tout l'écran, le contenu de la boite étant centrée dans cette div. Elle permet donc d'une part d'empêcher de cliquer en dehors de la pseudo boite, et d'autre part de mettre la boite au dessus du reste du contenu xul.

• *ATTENTION** : cette alternative ne permet pas d'empêcher la navigation au clavier dans ce qui est en dessous de la div. Si vous trouvez un moyen d'empecher ça...

Dans le fichier XUL de votre écran principal, vous intégrez ceci :

 <window title="ma fenetre principale"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    [[xmlns:html="!http://www.w3.org/1999/xhtml]]"
    >
    ici le contenu normal de la fenêtre

    <[[html:div]] id="maboite" class="modalDialogBackground">
       <box class="modalDialog">
          <vbox class="modalDialogContent">
          ici le contenu de votre pseudo boite
          </vbox>
       </box>
    </[[html:div]]>
 </window>

dans les css :

 .modalDialogBackground {
    [[display:none]];
    [[position:fixed]];
    [[top:0]];
    [[left:0]];
    [[width:100%]];
    [[height:100%]];
    background-color: transparent;
    background-[[image:url(fond_modal.png)]];
    z-[[index:1000]];
 }
 .modalDialog {
    [[width:100%]];
    [[height:100%]];
    -moz-box-[[pack:center]];
    -moz-box-[[align:center]];
 }
 .modalDialogContent {
    -moz-appearance: dialog;
 }

fond_modal.png est une image semi transparente. La boite de classe modalDialog permet de centrer sur l'écran la "sousboite" qui contiendra le contenu visible du pseudo dialog.

Ensuite, pour afficher ou non la boite, suffit de changer le style display sur la div

  document.getElementById('maboite').style.display='none'; // cachée
  document.getElementById('maboite').style.display='block'; // affichée

Voici un exemple : http://xulfr.org/sources/boitemodale/boi(..)