"popup" avec un div

Version imprimable

05/03/2013, 00h20
laurentSc

"popup" avec un div

Bonsoir,

je voudrais faire une fenêtre popup mais comme les vraies popups sont souvent bloquées, je voudrais plutôt faire une <div> dont le display passe de none à block. Existe-t-il des tutos sur ce sujet ? Car j'ai grosso modo l'idée, mais je suis persuadé de ne pas tout connaître.
05/03/2013, 07h48
Bovino

:recherch:
Oui il y en a, il suffit de chercher un minimum...

Qu'est-ce que tu penses de ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div
 style="z-index: 99; display: none; position: absolute; left: 0pt; top: 0pt; width: 100%; height: 100%;"
 id="popup">
<table style="width: 100%; height: 100%;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td align="center">
      <div
 style="border: 1px solid rgb(0, 0, 0); background: rgb(255, 255, 255) none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; width: 300px; height: 300px;">Et
sa fais une jolie fenetre de 300x300<br>
      <a href="#"
 onclick="document.getElementById('popup').style.display = 'none'">Refermer
la popup</a></div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<div
 onclick="document.getElementById('popup').style.display = 'block'">Affiche
la popup</div>

05/03/2013, 18h59
NoSmoking

Bonjour,

Citation:

Qu'est-ce que tu penses de ça

si ce n'est l'utilisation d'un TABLE complétement inutile, du code CSS inline, de l'utilisation d'une balise A pour refermer la popup entrainant le replacement de la page en haut, cela devrait le faire :mrgreen:

C'était le résultat d'un copier-coller et je n'avais pas travaillé le code, mais c'est fait (et sortir le css, ça rend les choses plus claires, puisqu'avant, je n'arrivais pas à positionner la popup :

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
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <title>test</title>
 
 
  <style>
#popup {
z-index: 99; 
display: none; 
position: absolute; 
width: 100%; 
height: 100%;
top:200px;
left:200px;
}
#fenetre {
border: 1px solid rgb(0, 0, 0); 
background: rgb(255, 255, 255) none repeat scroll 0% 50%; 
-moz-background-clip: initial; 
-moz-background-origin: initial; 
-moz-background-inline-policy: initial; 
width: 300px; 
height: 300px;
}
  </style>
</head>
 
 
<body>
 
<div id="popup">
<div id="fenetre" style="">Et ça fait une jolie fenetre de 300x300<br>
 
<div onclick="document.getElementById('popup').style.display = 'none'">Refermer
la popup</div>
 
</div>
 
</div>
 
<div onclick="document.getElementById('popup').style.display = 'block'">Affiche
la popup</div>
 
</body>
</html>

05/03/2013, 20h57
Bovino

Laurent, depuis le temps, tu ne sais toujours pas écrire un doctype ? :no:
Pas étonnant que tu aies des problèmes avec les CSS du coup...

Le doctype, il était pas de moi, mais de mon éditeur html...
Sinon, pour simplifier, j'ai viré une <div> ; et de plus, je modifie le curseur au survol, mais y a pas moyen de le faire avec du css (hover...) ?

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
<!DOCTYPE>
<html>
<head>
 
  <meta content="text/html; charset=utf-8" http-equiv="content-type">
  <title>test</title>
 
 
  <style>
 
 
 
#fenetre {
text-decoration:underline;
color:blue;
z-index: 99; 
display: none; 
position: absolute; 
top:200px;
left:200px;
border: 1px solid rgb(0, 0, 0); 
background: rgb(255, 255, 255) none repeat scroll 0% 50%; 
-moz-background-clip: initial; 
-moz-background-origin: initial; 
-moz-background-inline-policy: initial; 
width: 300px; 
height: 300px;
}
  </style>
</head>
 
 
<body>
 
<div id="fenetre" onmouseover="document.getElementById('fenetre').style.color = 'red';document.getElementById('fenetre').cursor='pointer';"; onmouseout="document.getElementById('fenetre').style.color = 'blue'">Et ça fait une jolie fenetre de 300x300<br>
 
<div onclick="document.getElementById('fenetre').style.display = 'none'">Refermer
la popup</div>
 
</div>
 
</div>
 
<div onclick="document.getElementById('fenetre').style.display = 'block'">Affiche
la popup</div>
 
</body>
</html>