Présentation

Le tag js_modalbox permet de créer une boîte modale dans la fenêtre du navigateur. Elle fonctionne sous la forme d'un bloc Smarty, i.e. elle attends un contenu qui sera affiché à l'intérieur de la boîte.

Par défaut, la boîte est générée sur la base d'une table de style CopixTable? mais il est possible de fournir un contenu entièrement personnalisé avec le paramètre customContent.

Ce tag utilise MooTools?.

Forme Smarty

{* Crée une boîte dont le titre est "Ouverture" qui peut être ouverte en 
cliquant sur "Sésame ouvre-toi !" ou "Toc Toc !" et aura un bouton "Fermer" *}
{js_modalbox title="Ouverture" openTriggers="toctoc,ouverture" closeTriggers="fermeture"}
<p>Qui est là ?</p>
<input id="fermeture" type="button" value="Fermer"/>
{/js_modalbox}
<span id="ouverture">Sésame ouvre-toi !</span>
<span id="toctoc">Toc Toc !</span>

Forme PHP

<?php
_eTag('js_modalbox', array(
  'title' => 'Ouverture',
  'openTriggers' => array('toctoc', 'ouverture'),
  'closeTriggers' => 'fermeture'
), '<p>Qui est là ?</p><input id="fermeture" type="button" value="Fermer"/>');
?>
<span id="ouverture">Sésame ouvre-toi !</span>
<span id="toctoc">Toc Toc !</span>

Paramètres

id

Identifiant de l'élément DOM généré pour la boîte modale. Si ce paramètre est omis, un identifiant aléatoire est généré.

customContent

Identifiant d'un élément DOM qui est le contenu personnalisé à afficher.

Ce paramètre est incompatible avec les paramètres title et icon.

title

Titre de la boîte standard.

Ce paramètre est incompatible avec customContent.

icon

Icône à afficher dans la boîte standard.

Ce paramètre est incompatible avec customContent.

openTriggers

Liste d'identifiants d'éléments DOM qui ouvrent la boîte lorsque l'utilisateur clique dessus.

Ce peut être un tableau ou une liste d'identifiants séparés par des virgules.

closeTriggers

Liste d'identifiants d'éléments DOM qui ferment la boîte lorsque l'utilisateur clique dessus. Etant donné que la boîte est modale, ces éléments DOM doivent être dans la boîte.

Ce peut être un tableau ou une liste d'identifiants séparés par des virgules.

onOpen

Code Javascript à exécuter à l'ouverture de la boîte.

Ce code est ajouté sous la forme d'un listener pour l'événement "open".

{* Affiche une alerte "Ouverture !" *}
{js_modalbox openTriggers="doOpen" closeTriggers="doClose" onOpen="alert('Ouverture !');"}
C'est ouvert.
<input id="doClose" type="button" value="Fermer"/>
{/js_modalbox}
<input id="doOpen" type="button" value="Ouvrir"/>

onClose

Code Javascript à exécuter à la fermeture de la boîte.

Ce code est ajouté sous la forme d'un listener pour l'événement "close".

Evénements Javascript

Les événements sont envoyés à l'élément DOM identifié par le paramètre id.

open

Provoque l'ouverture de la boîte.

{* Crée une boîte qui s'ouvre lorsqu'on passe au-dessus du texte. *}
{js_modalbox id="maBoite" closeTriggers="doClose"}
C'est ouvert.
<input id="doClose" type="button" value="Fermer"/>
{/js_modalbox}
<span id="trigger">Survolez-moi !</span>
{copixhtmlheader kind="jsdomreadycode"}{literal}
$('trigger').addEvent('mouseover', function(){$('maBoite').fireEvent('open');});
{/literal}{/copixhtmlheader}

close

Provoque la fermeture de la boîte.

{* Crée une boîte qui se ferme automatiquement au bout de 10 secondes. *}
{js_modalbox id="maBoite" onOpen="fermeMaBoite.delay(10000);"}
C'est ouvert.
{/js_modalbox}
<input id="doOpen" type="button" value="Ouvrir"/>
{copixhtmlheader kind="jscode"}{literal}
function fermeMaBoite() {
  $('maBoite').fireEvent('close');
}
{/literal}{/copixhtmlheader}