masquage/affichage balise DIV et Opéra
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:
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 :aie:
