mettre un boite de dialogue à l'ouverture page

Version imprimable

16/02/2011, 14h38
BXDSPORT

mettre un boite de dialogue à l'ouverture page

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
16/02/2011, 15h28
RomainVALERI

window.open ? ^^
16/02/2011, 15h47
BXDSPORT

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.
16/02/2011, 17h16
andry.aime

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+.

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

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
 
<!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>

16/02/2011, 18h28
andry.aime

@mekal: Pourquoi tu n'utilise jamais un ";" dans ton code javascript?
16/02/2011, 18h41
Invité

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;)
16/02/2011, 18h59
RomainVALERI

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

...et ça peut être dangereux parfois :mrgreen:
18/02/2011, 13h47
BXDSPORT

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
18/02/2011, 13h58
BXDSPORT

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
18/02/2011, 14h08
BXDSPORT

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

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

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 }

18/02/2011, 17h56
BXDSPORT

C'est Super. J'ai compris et trouvé -
08/03/2011, 17h03
BXDSPORT

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...
08/03/2011, 17h40
Invité
dans le css de la boite ajoute ces lignes
Code:

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