Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

Boite de dialogue personnalisée


Sujet :

Contribuez

  1. #1
    Expert éminent sénior
    Boite de dialogue personnalisée

    Source : Boite de dialogue personnalisée
    Auteur : Auteur / FremyCompany
    Lien FAQ : Position Fixed sous IE
    Autre lien : Cacher du javascript dans du CSS (IE-Only)

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>Titre</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
     
    <script type="text/javascript" src="patchIE.js"></script>
     
    <style type="text/css">
    <!--
    /*
    Couleurs systeme :
    "ActiveCaption" : barre de titre
    "ActiveCaptionText" : texte de la bare de titre
    "ButtonFace: fond le la fenêtre
    */
     
    /*** Styles de la boite de dialogue ***/
    .fond{
     /** Firefox **/
     position: fixed;
     top: 0px;
     left: 0px;
     
     height: 100%;
     width: 100%;
     z-index: 1000;
     display: none;
     border: none;
     background-color: #000000;
     -moz-opacity: 0.30;
     opacity: 0.30;
     filter : alpha(opacity=30);
     
     /** IE **/
     position: expression(IEFixedElementPos());
     top: expression(IEFixedElementTop(0));
     left: expression(IEFixedElementLeft(0));
     width: expression(IE100Width());
     height: expression(IE100Height());
    }
     
    .conteneurPrompt{
     /** Firefox **/
     position: fixed;
     top: 25%;
     left: 25%;
     
     border: 3px outset #AAAAAA;
     /*height: 150px;*/
     width: 50%;
     display: none;
     z-index: 2000;
     
     /** IE **/
     position: expression(IEFixedElementPos());
     /** on tient compte des 25% definis plus haut **/
     top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 25/100)));
     left: expression(IEFixedElementLeft(parseInt(document.body.clientWidth * 25/100)));
     
    }
     
    .titrePrompt{
     background-color: #AAAAFF;
     color: #000000;
     font-weight: bold;
     font-size: 11pt;
     font-family: Arial;
     text-align: center;
    }
     
    .contenuPrompt{
     background-color: #DDDDDD;
     color: #000000;
     font-size: 11pt;
     font-family: "Times New Roman";
     margin: 0px;
     padding: 20px;
    }
     
    .boutonsPrompt{
     text-align: center;
    }
     
    .ok, .annuler{
     width: 80px;
    }
     
    .ok{
     margin-right: 10px;
     margin-left: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
    }
     
    .annuler{
     margin-right: 0px;
     margin-left: 10px;
     margin-top: 0px;
     margin-bottom: 0px;
    }
    /*** Fin des styles de la boite de dialogue ***/
    //-->
    </style>
     
    <script type="text/javascript">
    <!--
    function ouvreBoite()
    {
      document.getElementById("monPrompt").style.display = "block";
      document.getElementById("idFond").style.display = "block";
    }
     
    function fermeBoite()
    {
      document.getElementById("monPrompt").style.display = "none";
      document.getElementById("idFond").style.display = "none";
    }
     
    /**************************************************************************/
    /** Actions realisees par l utilisateur si clic sur Ok ou Annuler *********/
    function clicOk()
    {
      fermeBoite();
     
      /** Autres actions a realiser si clic sur Ok **/
      /** ... **/
    }
     
     
    function clicAnnuler()
    {
      fermeBoite();
     
      /** Autres actions a realiser si clic sur annuler **/
      /** ... **/
    }
     
    /**************************************************************************/
     
    //-->
    </script>
     
     
    </head>
     
    <body>
    <!-- Debut - Boite de dialogue -->
         <!-- Fond de la boite de dialogue -->
    <div id="idFond" class="fond">
    &nbsp;
    </div>
     
          <!-- Boite de dialogue -->
    <div id="monPrompt" class="conteneurPrompt">
     
      <div class="titrePrompt">
           Ceci est le titre de la boite de dialogue
      </div>
     
      <div class="contenuPrompt">
        <!-- debut - elements de la boite de dialogue -->
        Elements de ma boite de dialogue&nbsp;:<br />
        <input type="radio" id="idRadio1" name="radio1" checked="checked" />Choix 1
        <input type="radio" id="idRadio2" name="radio1" />Choix 2
        <input type="radio" id="idRadio3" name="radio1" />Choix 3
        <input type="radio" id="idRadio4" name="radio1" />Choix 4<br />
        <input type="text" value="Votre texte" id="idText" size="20" maxlength="15" />
        <!-- fin - elements de la boite de dialogue -->
     
        <div class="boutonsPrompt">
          <br />
          <input type="button" value="Ok" id="idOk" class="ok" onclick="clicOk()" />
          <input type="button" value="Annuler" id="idAnnuler" class="annuler" onclick="clicAnnuler()" />
        </div>
     
      </div>
     
    </div>
    <!-- Fin - Boite de dialogue -->
     
     
     
     
    <div>
     
    <input type="button" value="Ouvrir boite de dialogue" onclick="ouvreBoite()" />
     
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <input type="button" value="Tester le clic" onclick="alert('clic')" />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     
    </div>
     
    </body>
     
    </html>


    patchIE.js
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
     
           function IEFixedElementPos()
            {
              // IE 7 en mode standard
              if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
              {
                 return ("fixed");
              }
              return ("absolute");
            }
     
            function IEFixedElementTop(defaultTop)
            {
              // IE 7 en mode standard
              if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
              {
                 return (defaultTop.toString() + "px;")
              }
              return ((document.body.scrollTop+defaultTop) + "px");
            }
     
            function IEFixedElementLeft(defaultLeft) 
            {
              // IE 7 en mode standard
              if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
              {
                 return (defaultLeft.toString() + "px;")
              }
              return ((document.body.scrollLeft+defaultLeft) + "px");
            }
     
            function IE100Width() 
            {
                //IE 7  en mode standard
                if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat")
                {
                    return "100%";
                }
                return (document.body.offsetWidth-21) + "px";
            }
     
    	function IE100Height() 
            {
                //IE 7  en mode standard
                if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat")
                {
                    return "100%";
                }
                return (document.body.offsetHeight-21) + "px";
            }



    Remarques :
    • fonctionne sous Firefox (1 et 2), IE 5, 6 et 7, Opéra 9.2
    • code valide XHTML 1.1
    • le code ne passe pas la validation CSS à cause des patch pour IE


    La boite de dialogue reste fixe même si l'utilisateur réalise un scroll sur la page. Les boutons, liens, etc, en arrière plan sont désactivés lorsque la boite de dialogue est affichée (boite modale).

    La boite de dialogue se compose de 2 éléments qui sont affichés ou cachés en même temps :
    • un div idFond il a les dimensions de la fenêtre. Son rôle : grâce à sa propriété z-index: 1000 il se place au dessus des éléments de la page et bien que transparent, les liens et les boutons présents dans la page sont inacessibles quand il est affiché.
    • un div monPrompt qui forme la boite de dialogue qui se place au dessus du div idFond (z-index: 2000). Il se compose de div :
      • pour le titre
      • pour les élements de la boite de dialogue
      • pour les boutons Ok / Annuler (on peut en rajouter )

    • Vous pouvez utiliser les couleurs système (cf. le commentaire au début de la feuille de style)
      Code css :Sélectionner tout -Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
       
      Couleurs systeme :
      "ActiveCaption" : barre de titre
      "ActiveCaptionText" : texte de la barre de titre
      "ButtonFace" : fond le la fenêtre


    Le script :
    • function ouvreBoite() : affiche le fond et la boite de dialogue
    • function fermeBoite() : cache le fond et la boite de dialogue
    • function clicOk() : action à réaliser si l'utilisateur clique sur Ok
    • function clicAnnuler() : action à réaliser si l'utilisateur clique sur Annuler

    [edit]Code source mis à jour ce 19 mai 2007 Merci à FremyCompany pour sa contribution [/edit]
    [edit]Code source mis à jour ce 10 septembre 2007 : ajout de la fonction function IE100Height() dans patchIE.js[/edit]

  2. #2
    Expert éminent sénior
    Des bugs peuvent persister :
    si le clic en dehors de la pop-up est possible, on peut remplacer le div idFond par une image gif transparente de 1px par 1px. (avec un width et un height à 100%)

  3. #3
    Membre du Club
    est ce possible d'indiquer a l'utilisateur que le reste de la fenetre est inactive en mettant une opacité de 0.5 par exemple ? si oui, comment ?

  4. #4
    Expert éminent sénior
    pour l'opacité :
    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    .fond{
    background-color: #AAAAAA;
    -moz-opacity: 0.50; /** Pour FF : valeur entre 0 et 1 **/
    opacity: 0.50; /** Opera je crois **/
    filter : alpha(opacity=50); /** IE **/
    }

    peut-être que cela peut supprimer le bug du clic en dehors de la pop-up

  5. #5
    Membre du Club
    Je sais pas si c'est moi qui fait une mauvaise intégration(je fais juste un copier coller). Mais sa ne marche pas sous IE6 (Marche bien sous IE7 et FF1&2) le fond grisé ne s'étend pas!

  6. #6
    Expert éminent sénior
    Oui effectivement, il manque une fonction dans le patch et un élément dans la CSS (attribut height de la classe fond).

    La hauteur du fond n'est pas précisée : regarde à nouveau la source, je l'ai mise à jour.

    Teste à nouveau le code sous IE 7, on ne sait jamais.

    Pour la fonction IE100Height(), j'ai fait un copier-coller de IE100Width() en remplaçant document.body.offsetWidth par document.body.offsetHeight, je pense que cela devrait fonctionner.

    Ca fonctionne sous FF normalement.


  7. #7
    Membre émérite
    Quand je teste le code sous IE6, il me demande d'autoriser l'activeX, y a pas moyen de court-circuiter ça ??

    Je crois avoir vu un code javascript qui empechait IE de faire la demander d'activation activeX. Mais j'arrive pas à remettre la main dessus.

    Et vous ??
    N'oubliez pas de consulter les FAQ PHP et les cours et tutoriels PHP

  8. #8
    Expert éminent sénior
    Citation Envoyé par Maxoo Voir le message
    Quand je teste le code sous IE6, il me demande d'autoriser l'activeX, y a pas moyen de court-circuiter ça ??

    Je crois avoir vu un code javascript qui empechait IE de faire la demander d'activation activeX. Mais j'arrive pas à remettre la main dessus.

    Et vous ??
    oui, effectivement j'ai également ce message.... Mais là je ne peux pas te répondre Peut-être que cela vient du test :
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
    {
     
    }

    Je pense que Fremy est mieux placé que moi pour te répondre (c'est lui qui a écrit le patch IE).

    En modifiant les paramètres de sécurité de IE ?

  9. #9
    Rédacteur/Modérateur

    window.prototype permet de faire le même genre de dialogues sans faire intervenir d'activeX donc pas de demande d'autorisation ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  10. #10
    Expert éminent sénior
    Citation Envoyé par SpaceFrog Voir le message
    window.prototype permet de faire le même genre de dialogues sans faire intervenir d'activeX donc pas de demande d'autorisation ...
    un exemple ?

  11. #11

  12. #12
    Rédacteur/Modérateur

    Merci fillot
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  13. #13
    Membre à l'essai
    super ce script, merci beaucoup

  14. #14
    Expert confirmé
    Salut
    Très jolie source auteur, je voulais juste ajouter une précision concernant l'alerte activeX, celle ci est également déclenchée par la propriété 'filter : alpha(opacity=50); /** IE **/' donc , soit en local on remplace par un gif transparent
    soit on aura l'alerte

    Encore merci pour ta source
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  15. #15
    Expert éminent sénior
    Citation Envoyé par le_chomeur Voir le message
    Salut
    Très jolie source auteur, je voulais juste ajouter une précision concernant l'alerte activeX, celle ci est également déclenchée par la propriété 'filter : alpha(opacity=50); /** IE **/' donc , soit en local on remplace par un gif transparent
    soit on aura l'alerte

    Encore merci pour ta source
    remercie également FremyCompany (patchIE)
    Ce qui me supprend est que le filtre déclenche l'alerte activeX, c'est curieux... (car c'est une propriété CSS pas une fonction javascript )
    Cela doit dépendre de la configuration de IE.

    Sinon effectivement on peut remplacer par un gif transparent (le png est mal supporté par IE et il faut appliquer des filtres aussi).

  16. #16
    Expert confirmé
    effectues ce petit test pour t'en convaincre :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
    .fond{
    width:200px;
    height:200px;
    background-color: red;
    -moz-opacity: 0.50; /** Pour FF : valeur entre 0 et 1 **/
    opacity: 0.50; /** Opera je crois **/
    filter : alpha(opacity=50); /** IE **/
    }
    </style>
    </head>
     
    <body>
    <div class="fond">
    </div>
    </body>
    </html>


    Sous ie7 ( toute option par défaut ) demande d'activation d'activeX
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  17. #17
    Modérateur

    Citation Envoyé par le_chomeur Voir le message
    Sous ie7 ( toute option par défaut ) demande d'activation d'activeX
    En local seulement.

  18. #18
    Expert confirmé
    Oui oui en local uniquement ( je l'avais précisé lors du premier post :p )
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  19. #19
    Expert confirmé
    Une question me vient à la lecture de ce post : as-tu constaté des problèmes de recouvrement (superposition défectueuse) avec les éventuels select présents dans la page sous IE6 ?

    J'avais écrit une fonction à peu près équivalente il y a quelques temps, mais j'avais du passer par une vilaine bidouille (passer tous les select de la page en display none pendant que la fenêtre de dialogue est afichée, avec opération inverse quand elle se referme) pour éviter que les select soient "au-dessus" du div qui cache le fond de la page (div 70% opaque)...

    En tout cas merci pour cette contribution, je vais l'utiliser pour faire une petite "revue de code / amélioration" à ma propre fonction, ça lui donnera sûrement un ptit coup de jeune

    ...pour les linguistes et les curieux >>> générateur de phrases aléatoires

    __________________

  20. #20
    Expert éminent sénior
    N'ayant pas IE6 je n'ai pas testé....

    Avec FF et IE 7 pas de souci de z-index en tout cas.

###raw>template_hook.ano_emploi###