"DIV" et centrages (y'a aussi du JS)
Bonjour,
Je suis en train de coder un widget javascript de boites de dialogues (modales ou non, peu importe, ce sont des boites de dialogue).
Tout d'abord, le fonctionnement du truc. les DIVs qui serviront de boites de dialogues sont auparavant invisible, et leur hauteur n'est pas fixée. Lorsqu'on veut afficher une boite de dialogue, on affiche un DIV, en absolute, qui opacifie partiellement la page, puis on affiche, en absolute aussi, la boite de dialogue.
Mon problème est que je n'arrive pas à centrer les DIVs verticalement ni horizontalement.
Pour le vertical, je sais que cela marche avec un truc du genre "style.top='50%';style.marginTop= -document.getElementById('dialog').style.offsetHeight);", mais le problème est que offsetHeight me retourne 0, que ce soit sous Fx, IE ou Opéra. Pourtant, à priori, la boite de dialogue est créée avant l'appel de la fonction javascript, même si elle est masquée par défaut.
Pour l'alignement horizontal, normalement une automatisation des marges de droite et de gauche le fait, mais ce n'est pas mon cas :s
Voilà mon code sans les tentatives d'alignement vertical:
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
| <html>
<head>
<style>
.dialog {
background-color: #DDDDFF;
display:none;
-moz-border-radius: 5px;
padding: 4px;
margin-left: auto;
margin-right: auto;
width: 525px;
border: #999 1px solid;
z-index: 999;
position: absolute;
}
#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 = "";
var has_clicked = false;
var divh = 0;
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(obl){
opened_div = obl;
var obol = document.getElementById("dialog_container");
obol.style.height=page_height()+"px";
obol.style.width=page_width()+"px";
obol.style.display='block';
document.getElementById(obl).style.display='block';
return false;
}
function hide_dialog(){
document.getElementById('dialog_container').style.display="none";
document.getElementById(opened_div).style.display="none";
document.onkeypress=''
}
</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> |
PS : Ce widget est une adaptation d'un widget trouvé sur un autre site, donc si des noms de fonction ou de variable vous semblent familier, c'est normal ;)
Merci.
