mettre un boite de dialogue à l'ouverture page

**BXDSPORT** · 16/02/2011, 15h38

Bonjour

J'aurai besoin d'avoir un fenêtre ou boite de dialogue me permettant à l'ouverture de la page html ou php du style qui apparaissent sur certains sites à gauche de l'écran. Elle doit pouvoir accueillir un animation FLASH.

Vous pouvez me donner la méthode pour effectuer ce type de fenêtre.

J'espère être clair.

Cordialement

**RomainVALERI** · 16/02/2011, 16h28

window.open ? ^^

**BXDSPORT** · 16/02/2011, 16h47

Seul hic, je pense de cette fonction fait que la fenêtre est interprétée comme un pop up et que les antipopup la déactiverai.

**andry.aime** · 16/02/2011, 18h16

Bonsoir

Tu crées un div avec une postion absolute, et le max des z-index de ton css qui contiendra le contenu de ton popup. Dans le coin haut à droite, tu mets un image d'un petit croix pour le fermer et quand on clique dessus, tu mets display:none au div.

A+.

Invité · 16/02/2011, 19h22

j'ai trouve ca dans ma boite a outils je pense que c'est ce que toi vouloir recherché

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
 
<!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>
<title>menu gauche</title>
<link rel="stylesheet" type="text/css" href="buzz.css"></head>
<style type="text/css">
 
#nunu{
position:fixed;
top:50px;
left:-200px;
width:200px;
height:200px;
background-color:black;
z-Index:10
}
 
#touche{
position:absolute;
right:-20px;
top:0px;
width:20px;
height:100px;
background-color:red;
}
 
</style>
 
<script type="text/javascript" language="JavaScript">
 
function aller(){
 
var nume=document.getElementById('nunu');
nume.style.left=nume.offsetLeft+10+'px';
if(nume.offsetLeft==0){
document.getElementById('touche').onclick=retour;
return false;
}
setTimeout(aller,10);
}
 
function retour(){
 
var nume=document.getElementById('nunu');
nume.style.left=nume.offsetLeft-10+'px';
if(nume.offsetLeft<=-(nume.offsetWidth)){
document.getElementById('touche').onclick=aller;
return false;
}
setTimeout(retour,10);
}
 
onload=aller;
 
</script>
</head>
<body>
<div id="nunu">
 
<div id='touche' onclick='aller()'>
</div>
</div>
</body>
</html>

**andry.aime** · 16/02/2011, 19h28

@mekal: Pourquoi tu n'utilise jamais un ";" dans ton code javascript?

Invité · 16/02/2011, 19h41

parce que j'ai personne pour me le rappeler mais quand il le faut j'en suis capable

j’essaierai de ne pas oublier la prochaine fois pour ne pas montrer le mauvais exemple

**RomainVALERI** · 16/02/2011, 19h59

<balance>SF en oublie plein aussi</balance>

...et ça peut être dangereux parfois

**BXDSPORT** · 18/02/2011, 14h47

Mekal,
L'idée est superbe et va dans le sens que j'attends. Il me reste plus qu'à aller vers ce que j'attends

Cordialement

**BXDSPORT** · 18/02/2011, 14h58

mekal encore une question, où est la clé de déplacement de ton bandeau rouge de tel façon qu'il se déplace au bord de la boite.
Actuellement dans ton exemple la boite est de taille 200 x 200.
Demain, la boite est plus grande. Quel est le chiffre que tu modifie pour que la boite s'ajuste. A moins que tu rajoute du code afin qu'il s'ajuste par rapport à la dimension de la boite.

Sinon ta procédure serait intéressante à mettre dans le FAQ de développez.

Merci de tes pistes.

Cordialement

**BXDSPORT** · 18/02/2011, 15h08

Eh oui, encore moi,
J'ai remarqué que si j'agrandi la zone nunu. Une partie de celle-ci reste vu lors de la réduction. Connaitre le critère clé est le moyen de faire disparaitre en grande partie la partie non-voulue.

Cordialement

Invité · 18/02/2011, 15h24

dans le css si tu modifie la largeur il faut aussi modifier le left

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#nunu{
position:fixed;
top:50px;
left:-400px;
width:400px;
height:200px;
background-color:black;
z-Index:10
}

**BXDSPORT** · 18/02/2011, 18h56

C'est Super. J'ai compris et trouvé -

**BXDSPORT** · 08/03/2011, 18h03

Un petit complément : je constate que les coordonnées ne s'adapte à la grandeur de l'écran. les dimensions que j'ai mise fonctionne bien sur mon écran de 22 pouces mais lorsque je regarde ma page sur un écran de 15 pouces. Je l'apercoit en bas de mon écran. J'aimerai que cette boite se mette toujours au centre de l'écran afin de pouvoir voir mon animation dans cette boite de dialogue. Une solution d'adaptation pour le paramètre Top et Left afin qu'il s'adapte selon la grandeur de l'écran ? Du javascript, du code php ?

Merci de cette nouvelle piste...

Invité · 08/03/2011, 18h40

dans le css de la boite ajoute ces lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#nunu{
position:fixed;
left:-400px;
width:400px;
height:200px;
top: 50%;
margin-top: -100px;
background-color:black;
z-Index:10
}

j'ai mis margin-top -100px il s'agit de la moitié de la hauteur de la boite donc si la boite fait 300px il faudra mettre -150px

mettre un boite de dialogue à l'ouverture page

JavaScript

Discussions similaires

Partager

Partager