masquage/affichage balise DIV et Opéra

**Bensor** · 10/08/2007, 16h08

Bonjour,

Voilà, je rebondis de la section CSS avec mon widget de boites de dialogue

Le problème est que la boite se cache dans la seconde suivant son ouverture sous Opéra (9.21). Le problème n'arrive ni sous IE, ni sous Firefox

Voici le chti code source du widget :

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
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
<html>
  <head>
    <style>
      .dialog {
        background-color: #DDDDFF;
        display:none;
        -moz-border-radius: 5px;
        padding: 4px;
        margin-left: auto;
		margin-right: auto;
        width: 526px;
        left: 50%;
  		margin-left: -263px;
        border: #999 1px solid;
        z-index: 999;
        position: absolute;
        top: 50%
      }
      #dialog_container{
        opacity: 0.5;
        background-color: #FFFFFF;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        top: 0px;
        left: 0px;
        display:none;
        position: absolute;
        z-index: 998;
      }
    </style>
 
    <script type='text/javascript'>
      var opened_div = "";
 
      function page_width() {
        return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;
      }
      function page_height(){
        return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;
      }
 
      function show_dialog(dialog){
      	opened_div = dialog;
 
        var dialog_container = document.getElementById("dialog_container");
        dialog = document.getElementById(dialog);
 
        dialog_container.style.height=page_height()+"px";
        dialog_container.style.width=page_width()+"px";
        dialog_container.style.display='block';
 
        dialog.style.display='block';
        var width = dialog.offsetHeight;
        dialog.style.marginTop=-(width/2);
      }
      function hide_dialog(){
        document.getElementById('dialog_container').style.display="none";
        document.getElementById(opened_div).style.display="none";
      }
 
    </script>
  </head>
  <body>
    <div id='dialog_container'></div>
    <div id='dial1' class='dialog'>
      <p>Dialogue 1</p>
      <p><a href='#' onclick='hide_dialog();'>Fermer</a></p>
    </div>
    <div id='dial2' class='dialog'>
      <p>Dialogue 2</p>
      <p><a href='#' onclick='hide_dialog();'>Fermer</a></p>
    </div>
    <p>Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla</p>
    <a href='#' onclick='show_dialog("dial1")'>Montrer 1</a><a href='#' onclick='show_dialog("dial2")'>Montrer 2</a>
    <p>Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla</p>
 
  </body>
</html>

Comme vous pouvez vous en douter, "show_dialog()" affiche une boite de dialogue dont l'ID est passé en paramètre, et "hide_dialog()" la masque. Enfin bref, faut que je reussisse à faire comporter ce widget sous Opéra de la même façon qu'il se comporte sous IE et Firefox...il ne doit pas aimer la musique classique apparement

**Tenqi** · 10/08/2007, 22h03

Bonjour,

Je n'ai pas testé mais n'oublie pas de préciser l'unité 'px" lors du changement de valeur en JS :
dialog.style.marginTop=-(width/2) + ".px";

Pas sur que ça change grand chose, mais bon, ça fera ce doute là en moins.

Numériquement,

--

Guillaume "Matrix" Gendraud
...

**Bensor** · 11/08/2007, 12h43

Je n'ai pas testé sur la même machine, vu que je ne suis plus au taf, mais sur mon ordinateur portable, où je viens d'installer la 9.22, le problème ne se produit pas O_o. Néanmoins, je rajoute le "px" là où il est absent. Je verrais bien lundi si le problème en question est résolu sur la 9.21.

**Bensor** · 13/08/2007, 09h41

Etrange. Je viens d'installer séparément la version 9.22, et le bug est toujours là, alors que chez moi, avec cette même version, tout fonctionne parfaitement

masquage/affichage balise DIV et Opéra

JavaScript

Vue hybride

Discussions similaires

Partager

Partager