PERSONNALISER LES BOÎTES DE DIALOGUE

Commentaire de popGG le 24/08/2007 09:48:04

C'est beaux et le code est propre. Rien à dire! J'ai hâte de voir toutes les merveilles que tu peux nous offrir avec Script.aculo.us.

C'est sans contexte un 10 ;D

Petit reproche néanmoins: je pense que tu devrais commenter un peu plus tes sources, surtout au niveau du js.

@+

Commentaire de XtremDuke le 24/08/2007 16:22:34

amezghal, remplace le bouton "valider" par un bouton "fermer" ^^

Commentaire de XtremDuke le 25/08/2007 09:48:41

Je suis de l'avis de popGG : contrairement à un prompt ou à un confirm, je ne vois pas l'interet pour une alert de geler l'execution du script.

Il est tout à fait possible de simuler une alert modale en créant un calque absolu avec les dimensions de la fenêtre puis de la surcoucher avec la boite de dialogue. (un calque noir avec une opacité de .75 est du bel effet)

Commentaire de XtremDuke le 27/08/2007 09:24:43

amezghal :
Je suis tout à fait d'accord avec toi mais comme je l'ai dit plus haut, ce script n'est applicable qu'à une alert et non un prompt ou un confirm.
Ensuite, et par définition, une fenetre modale est une fenetre dont la fermeture est obligatoire pour récuperer de focus de son parent... c'est tout. Le fait que les navigateurs gèlent les scripts pendant l'execution d'une fenetre modale n'a rien à voir avec le concept de modalité.

Have Fun

Commentaire de popGG le 30/08/2007 09:20:07

Salut XtremDuke,

Bien que la modalité d'un alert ne soit pas vraiment un problème (pour moi en tout cas), je pense que tu devrais essayer de résoudre ce conflit. Sachant que le "modal" est une fonction système, j'ai trouvé une source intéressante que je te conseille de regarder:
http://www.javascriptfr.com/code.aspx?ID=34989
window.showModalDialog me semble approprié pour une éventuelle évolution de ton alert.

Bonne journée

Commentaire de SpySeth le 28/10/2007 07:37:29

Pour cette source soit parfaite il faudrait que même lorsque les CSS sont désactivé l'on ne voit pas la boite de dialogue.

Commentaire de karimflashmx le 26/12/2007 15:23:11

salut merci pour le script c'est génial mais je veut voir comment on peut personaliser la position de la boite d'alert au melieu de l'ecran , c'est a dire si j'ai en bas de ma page un champs pour inserer une adresse email et un bouton valider alors quand j'ai fait le test je trouve que la boite s'affiche en haut ce qui meme ne se voi pas .
  

Commentaire de SpySeth le 29/12/2007 09:36:56

J'ai remarqué une erreur dans cette modification, désolé.

Donc il faut pour que ça fonctionne remplacer la fonction gerLayourOffsets() ET la fonction centerOnScreen() par ça :

function getLayoutOffsets(){
var de = document.documentElement;
var screenWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var screenHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
var screenHeightDecal = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return [screenWidth,screenHeight,screenHeightDecal];
}

function centerOnScreen(obj){
var screenOffsetWidth = getLayoutOffsets()[0];
var screenOffsetHeight = getLayoutOffsets()[1];
var screenOffsetHeightDecal = getLayoutOffsets()[2];

if(obj.style.position!='absolute') obj.style.position = 'absolute';
obj.style.left = (screenOffsetWidth/2)-(obj.getWidth()/2)+'px';
obj.style.top = (screenOffsetHeight/2)-(obj.getHeight()/2)+screenOffsetHeightDecal+'px';
}

Commentaire de SpySeth le 02/01/2008 09:25:21

Dans le premier code, j'utilise une technique qui ne fonctionne que sous les navigateurs qui respecte les standards (Firefox, Opéra, Safari...) et Internet Explorer version 5.5 et inférieur. Pour IE 6 et 7 cela ne fonctionne pas :

var screenHeightDecal = window.pageYOffset || document.body.scrollTop;

window.pageYOffset <-- compris par Firefox et compagnie
document.body.scrollTop; <-- compris par IE 5.5 et moins


C'est pour ça que dans le deuxième code j'ai ajouter la méthode pour IE 6 et 7 :

var screenHeightDecal = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return [screenWidth,screenHeight,screenHeightDecal];

document.documentElement.scrollTop <-- pour IE 6 et 7


J'ai aussi rendu le code plus logique : c'est la fonction getLayoutOffsets() qui permet de récupérer les informations de positionnement du canevas (~fenêtre) du navigateur, j'ai ajouter le bout de code (var screenHeightDecal = ...) qui récupère la position du canevas par rapport au haut de la page dans cette fonction, et j'ai modifier la fonction centerOnScreen() pour utiliser cette nouvelle information pour centrer la fenêtre.

Commentaire de SMaxime le 07/03/2008 11:42:06

Salut !!! D'abord, bravo pour le script. Mais c vrai que si le code était commenté je ne serais pas obligé de faire ce post.

Est-il possible d'utiliser ces boites de dialogues, sans avoir à cliquer sur un bouton ???
Car cela fct très bien avec un clic sur le bouton, mais pas en passant par un alert "normal".

Merci

Commentaire de SebMoine le 25/03/2008 22:40:52

cool ton script
j'ai fait ma personnalisé de message (ou boite de dialogue)
[je m'excuse pour ce doublon] le voici le mien

http://www.javascriptfr.com/codes/MESSAGE-PERSONNALISER_46177.aspx

Commentaire de XtremDuke le 02/06/2008 09:12:53

Salut karimflashmx,

Comme je l'ai dis plus haut, c'est un simple exemple d'affichage de boite de dialogue. Et ce type de personnalisation n'est pas modale. Pour empecher l'utilisateur de modifier ton formulaire, tu peux utiliser l'objet Form qu'offre Prototype. Tu trouveras certainement ton bonheur à l'adresse suivante :

http://prototypejs.org/api/form/disable

Ciao

Commentaire de Oumbra le 08/02/2010 19:55:29

Bonjour, tout d'abord exellent script qui fonctionne à la perfection.
Seul petit point noir, je n'arrive pas à le lancer sans a avoir a appuyer (ouf beaucoup de A... ^^) sur un bouton. J'ai bien essayer la méthode que tu as proposer :

"Commentaire de XtremDuke le 07/03/2008 14:49:56
SMaxime :

Oui biensur, supprime les lignes suivantes :

window.alert = function(msg){
showMsgBox(msg);
}

De ce fait, tu pourras afficher la boite perso par la fonction showMsgBox(msg) quand bon te semblera."

Mais hélas sans résultat (ni fenêtre ni message d'erreur...) je ne sais pas comment faire pouvais vous m'expliquer ?

dans mon script je dois afficher une fenêtre avec un contenu différent selon des tests en php.
Mon php fonctionne mais lorsque je fait :

<script type=\"text/javascript\">
alert('<b>Désolé,</b><br/>mot de passe érroné.');
Event.observe(window, 'load', initMsgBox, false);
</script>";

Il m'affiche une vulgaire alert (toute caca !!!) alors qu'avec un bouton :

<script type=\"text/javascript\">
alert('<b>Désolé,</b><br/>mot de passe érroné.');
Event.observe(window, 'load', initMsgBox, false);
</script>";

il m'affiche ma belleUh fenêtre.

Pourriez vous m'expliquer, s'il vous plait ?

Commentaire de Oumbra le 09/02/2010 01:18:37

J'en peux plus je ne trouve pas :'(, j'ai décortiqué les fichiers javasscript mais je ne comprends pas quelle fonction je pourrais appeler directement au lieux de passer par un onclick=alert()...

Commentaire de Oumbra le 09/02/2010 13:18:06

Bonjour XtremDuke,

Tout d'abord un grand merci pour ton attention car je désespère, je cherche vraiment d'arrache pied (si ça continu j'en aurais plus xD).

Ta solution me permet une chose, ne pas déclarer plusieurs fois : Event.observe(window, 'load', initMsgBox, false); à chaque fois que je fais un bouton pour ouvrir la fenêtre mais celà ne fonctionne toujours pas en appelant directement une alert('blabla'); dans le html au chargement de la page :'(.

Commentaire de XtremDuke le 09/02/2010 18:58:04

Si tu veux lancer une alert au chargement de ta page, essaie ça :

echo "
<input type=\"button\" value=\"Test\" onclick=\"alert('<b>Désolé,</b><br/>mot de passe érroné.')\">
<script type=\"text/javascript\">
initMsgBox();
alert(\"<b>Désolé,</b><br/>mot de passe érroné.\");
</script>";

Commentaire de Oumbra le 11/02/2010 15:23:55

J'ai enfin trouvé :)

Je vous explique donc comment avoir une boite de dialogue avec un effet modal :)

1. Placer un div en DEBUT de fichier html (JUSTE APRES body), cela simule un fond grisé mais rien de base. (mon image 'shadow.png' est une image grise):

<div id="D_FOND" style="display:none;width:100%;height:100%;background:url(images/shadow.png);opacity:0.3;filter:alpha(opacity=30)">
</div>

2. Ajouter les lignes suivantes  'ShowFond();' et 'HideFond();' tel que :

<!-- dans la fonction initMsgBox() -->
window.alert = function(msg)
{
showMsgBox(msg);
ShowFond();
}

<!-- dans la fonction initMsgBox() -->
btn.onclick = function()
{
closeMsgBox();
HideFond();
}

<!-- dans la fonction showMsgBox(content) -->
$('msgBoxContent').innerHTML = content;
centerOnScreen($('msgBox'));
new Effect.Appear('msgBox',{duration:0.2});
ShowFond();
}

3. Placer les fonctions suivantes dans le fichier, cumstomMsgBox.js :

function ShowFond()
{
  var Obj;
  //-- on affiche le fond
  Obj = document.getElementById('D_FOND');
  if( Obj)
{
with( Obj.style)
{
position="absolute";
display="";
left = "0px";
top  = "0px";
}
}

}

function HideFond()
{
var Obj;
Obj = document.getElementById('D_FOND');
if( Obj)
{
with( Obj.style)
{
display="none";
}
}
}

et voila vous avez désormé une boite de dialogue alert() avec un effet modal !!!
Pour appeler une boite de dialogue sans bouton ou autre évenement de l'utilisateur (click, reload, etc), placez : "Event.observe(window, 'load', initMsgBox, false);" dans le header de la page html et lorsque vous appelez votre boite (moi je le fais lorsque des restriction php sont fausses ou spéciales) et bien il suffit de faire un :
"<script language='javascript'>initMsgBox();alert('Votre message');</script>"

Voilà !!

Je remercie tout particulièrement duke pour son aide :)

Au revoir et a bientot :)

ps: je souhaite savoir s'il est possible de faire la meme chose avec une boite de dialogue prompt()???
N'hésitez pas à m'aiguiller, je fais beaucoup de recherche mais bon un peu d'aide est toujours bien venue :)

Commentaire de slushgood le 27/10/2010 11:17:23

Bonjour je reviens sur se sujet car j'aurais besoin d'un petit coup de main.
voila j'ai une première fenêtre du type Html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK rel=stylesheet type="text/css" href="include/opac.css">
<title>Microbib Opac - Fiche Document</title>
<link rel="shortcut icon" href="images/icobook.ico" />
<script type="text/javascript" src="include/prototype.js"> </script>
<script type="text/javascript" src="include/window.js"> </script>
<script type="text/javascript" src="include/debug.js"> </script>
<script type="text/javascript" src="include/securite.js"></script>
<script type="text/javascript">
<!--
  var sesPlus = new Array("sestitres","sesauteurs","sonresume");

  function init_msg()
  {
    for(var i=0; i<sesPlus.length; i++)
      if(document.getElementById(sesPlus[i]).style.display == "block")
        document.getElementById(sesPlus[i]).style.display = "none";
  }

  function toggle_msg(n)
  {
    init_msg();
    var id=sesPlus[n];
    document.getElementById(id).style.display = (document.getElementById(id).style.display == "none" ? "block" : "none");
  }

function revenir()
{
  if(LireCookie('affine') == 1) location.replace('affineliste.wco');
  else if(LireCookie('affine') == 2) location.replace('trier.wco');
  else location.replace(LireCookie('recherche'));
}

var support = '<%= detail.document%>';
var numero = '<%= detail.no_exemp %>';


//-->
</script>
</head>
<body onload="lanceTimeout();">


<div class="BIBLIOTHEQUES2">
<ul>
<li><a href="#" onClick="location.replace('opac.wco')"><img src="images_bibliotheque/logo_sfgu_mini.gif" alt="logo" width="177" height="99" align="middle"></a></li>
<li><h1>Le Catalogue Commun</h1></li>
<li><a href="#" onClick="location.replace('opac.wco')">>>Recherche Simple</a></li>
<li><a href="#" onClick="location.replace('opacext.wco')">>>Recherche Etendue</a></li>
<li><a href="#" onClick="location.replace('opac_theme.wco')">>>Recherche par Mot-Matière</a></li>
<li><a href="#" onClick="location.replace('nouveau.wco')">>>Nouveaut&eacute;s</a></li>
<li>         <script language="JavaScript">
<!--
       if(LireCookie(COOKIE_FONC_RESERV)==".T.")
     document.write(espacelecteur());
       //--></script>
<li>         <script type="text/JavaScript">
<!--
if(estConnecte())
document.write(estconnecte()); ;
//--></script>
<li>         <script language="JavaScript">
<!--
         if('<%= multisite %>'==".F.")
document.write(reglements());
       //--></script>

<li> <script language="JavaScript">
<!--
       if(LireCookie(COOKIE_FONC_MULTISITE)==".T.")
     document.write(multisite());
       //--></script>      

</ul>
</div>
  


<div class="MAIN">

<div class="FICHE">
<table width="100%">
      </table>
  <div class="ENTETE"><h2><%=detail.document+" N° "+detail.no_exemp%></h2></div>
  <div class="CONTENU">
    <table>
      <tr>
        <TD ROWSPAN="9" class="SUPPORT">
          <center>
            <%= IIF(!empty(detail.type_docum),"<img src='images/type/" + detail.type_docum + ".gif' valign='top'>","NR") %>
            </center>
          </TD>
        <td valign="top" class="TITRE">Titre principal</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.titre %></td>
        </tr>
      <tr>
        <tr>
          <td valign="top" class="TITRE" >Sous-Titre</td>
          <td valign="top" >&nbsp;</td>
          <td class="VALEUR"><%= detail.soustitre %></td>
          </tr>
      <tr>
        <td valign="top" class="TITRE">Autres Titres</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.autre_tit %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">Responsabilit&eacute;</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.auteur %> <%= detail.fonction %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">Autres Responsabilit&eacute;s</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.autre_aut %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">Editeur/Date d'&eacute;dition</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.editeur %> / <%= detail.annee_ed %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">Collection/S&eacute;rie</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.collection %> / <%= detail.serie %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">
          <%= IIF((detail.type_docum="V"),"Copyright/Support/Collation",IIF((detail.type_docum="S"),"N°Distributeur/Support/Détails",IIF((detail.type_docum="E"),"ISBN/Support","ISBN/Nb pages/Format"))) %>
          </td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR">
          <%= IIF((detail.type_docum="V"),detail.copyrigh + " / " + (IIF(detail.support="A","VHS",IIF(detail.support="B","DVD",IIF(detail.support="C","DivX",IIF(detail.support="U","Autre","NR"))))) + " / " + detail.version + " " + detail.couleur +  " " + TRANSFORM(detail.duree) + "minutes",IIF((detail.type_docum="S"),detail.no_distr + " / " + (IIF(detail.support="A","CD Audio",IIF(detail.support="B","K7 Audio",IIF(detail.support="C","DVD Audio",IIF(detail.support="D","Disque vinyl",IIF(detail.support="U","Autre","NR")))))) + " / " + detail.depot_le + " " + detail.type_enr,IIF((detail.type_docum="E"),detail.isbn + " / " + (IIF(detail.support="A","CD-ROM",IIF(detail.support="B","Disquette",IIF(detail.support="C","DVD-ROM",IIF(detail.support="D","Fichier numérique",IIF(detail.support="E","Site Internet",IIF(detail.support="F","Autre",IIF(detail.support="G","Textes-références-périodiques","NR")))))))),detail.isbn +" / " + detail.nb_page + " / " + detail.dimensio))) %>
          </td>
        </tr>
      <tr>
        <td colspan="4" class="INTERLIGNE">Bibliothèque dépositaire de cet exemplaire : <%= detail.ville %></td>
        </tr>
      <TD ROWSPAN="7" class="SUPPORT">
        <center>
          
          <%= IIF(!empty(detail.code_lan),"<img src='images/langue/" + detail.code_lan + ".jpg' valign='top'>","NR") %>
          </center>
        </TD>
        <tr>
          <td valign="top" class="TITRE">Type de document</td>
          <td valign="top">&nbsp;</td>
          <td class="VALEUR"><%= detail.statut%></td>
        </tr>
        <tr>
          <td valign="top" class="TITRE">Disponibilit&eacute;</td>
          <td valign="top">&nbsp;</td>
          <td class="VALEUR"><%= iif(empty(detail.dat_retpre),"Ce document est disponible","<b>Retour prévu le " + dtoc(detail.dat_retpre) + "</b>") %></td>
          
          </tr>
      <tr>
        <td valign="top" class="TITRE">Genre/Public vis&eacute;</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.genre %> / <%= detail.pub_vise %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">Localisation/Cote</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.localisati %>/ <%= detail.cote %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">Mot(s) mati&egrave;re</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.matiere %></td>
        </tr>
      <tr>
        <td valign="top" class="TITRE">R&eacute;sum&eacute;</td>
        <td valign="top">&nbsp;</td>
        <td class="VALEUR"><%= detail.resume %></tr>
      <tr>
        <td height="1px" colspan="4" ><center>
                                    <hr>
              <script language="JavaScript">

       if(LireCookie(COOKIE_FONC_RESERV)==".T.")
     document.write(lienReservation());
       </script>
            </center>
          </td>
        </tr>
    </table>
  </div>
  <div class="PIED"><a onClick="revenir()"><< Revenir en arrière</a>&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

</div>

<div id="content" style="display:none" >
<strong><span style="font-size:16px"> Site où récuperer le livre</span></strong>
<SELECT NAME="site_depot">
  <option value="1">premier
  <option value="2">deuxieme
  <option value="3">troisieme
  <option value="5">quatrieme
  </SELECT>
</div>
</body>
</html>


Ne vous souciez pas trop du contenu mais plutôt des dernières lignes elles font apparaitre une fenêtre Modal avec un menu a choix multiple.

Mon securite.js contient entre autre les infos suivante:
// Méthode site depot   

function openDialog(id) {
  Dialog.alert($(id).innerHTML, {className: "alphacube",  width:300,
okLabel:"Ok",ok: reserver(),
})   
  EcrireCookie(COOKIE_SITE_DEPOT,$('site_depot').getInputs('text'));

  }

Ma fenêtre apparait tout ce passe bien ,
mais voila mon dilemme j'aimerais récupérer dans un cookie "site_depot" le résultat choisi dans ma fenêtre modal ? comment faire ?
merci pour votre aide.