image pop up au démarrage

**horkets** · 21/10/2010, 16h49

Bonjour à tous,

Completement débutant en javascript, je voudrais afficher un pop up au démarrage d'un site.
Voici ce que j'utilise pour le moment et qui m'affiche un pop up tout bete avec un simple message :

Code :

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

1
2
3
4
5
6
 
<script>
  $(document).ready(function(){
      alert("On déménage !! ");
  });      
</script>

Jusqu'ici rien de compliqué, mais je voudrais afficher une image dans le pop up à la place du texte.
Comment faire pour placer une image dans le pop up ?

Et si c'est possible, y a t il moyen de n'afficher QUE l'image et pas la fenetre qui va autour, et donc de préciser un endroit sur l'image ou l'utilisateur devra cliquer pour que ce pop up image se ferme ...

Merci d'avance pour votre aide

**coach759** · 21/10/2010, 17h22

Bonjour,

Tu pourrais mettre une div par dessus tout (en jouant un peu avec le css), comme ça dedans tu n'aurais que ton image et ton lien.

**horkets** · 22/10/2010, 15h09

Salut,
Un exemple serait le bien venu ...
Sinon, sans CSS comment devrais je m'y prendre ?
Merci d'avance,
H

**mdaniel** · 23/10/2010, 02h33

Salut,

Non, tu ne peux pas n'afficher qu'une image avec l'utilisation de la méthode alert.

https://developer.mozilla.org/en/DOM/window.alert

Comme indiqué, cette méthode attend un message de type string. Bien que tu puisse lui passer un objet, tu retrouveras une convertion de ton objet en string (appel methode obj.toString).

Le seul moyen que je vois est d'utiliser un widget ou plugin de type dialog, je vois que t'utilises jQuery. Le widget Dialog de jQueryUI est trés bien fait et te permettra de répondra à ton besoin.

**danielhagnoul** · 23/10/2010, 23h58

Bonsoir

Exemple avec une division popup, un masque et l'utilisation des attributs data-XYZ introduit par jQuery 1.4.3 :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		a.menuPopup {
			display:block;
			margin:12px;
		}
		#divMasque {
			display:none;
			position:absolute;
			top:0px;
			left:0px;
			width:100% !important;
			height:100% !important;
			background-color:#D3D3D3;
			z-index:5;
		}
		#divPopup {
			display: none;
			position:absolute;
			top:12px;
			left:12px;
			width:800px;
			height:600px;
			background-color:#FAF0E6;
			border:1px solid gray;
			z-index:9999;
		}
		#divPopup p {
			padding:12px;
			text-align:center;
		}
		#imgPopup {
			display:block;
			position:relative;
			width:400px;
			height:200px;
			margin:12px auto;
			border:1px solid grey;
		}
	</style>
</head>
<body>
	<h1>Q. &amp; R. Forum jQuery</h1>
	<div id="conteneur">
		<div id="divMasque">&nbsp;</div>
		<p>
			<!--
				width et height maximum voir #divPopup
				data-XYZ nécessite jQuery 1.4.3
			-->
			<a class="menuPopup" data-src="../images/imageTest.png" data-width="400" data-height="200" href="#">Image de test au format PNG</a>
			<a class="menuPopup" data-src="../images/avatarDVJH.jpg" data-width="400" data-height="400" href="#">Avatar danielhagnoul</a>
		</p>
		<div id="divPopup">
			<img id="imgPopup" src=""/>
			<p>
				<button id="hidePopup">Fermer</button>
			</p>
		</div>
	</div> 
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.3.min.js"></script>
	<script>
		$(function(){
			$("#hidePopup").click(function(){
				$("#divPopup").hide();
				$("#divMasque").hide();
 
				return false;
			});
 
			$("a.menuPopup").click(function(){
				var obj = $(this);
 
				$("#imgPopup").attr("src", obj.data("src")).css({
					width: obj.data("width"),
					height: obj.data("height")
				});
 
				$("#divPopup").show();
				$("#divMasque").show();
 
				return false;
			});
		});
 	</script>
</body>  
</html>

**horkets** · 25/10/2010, 14h28

Bonjour,
Merci pour cet exemple

Je parviens grace à ce code à afficher une cadre en haut de la page.
Mais l'image ne se charge pas.
J'ai pourtant placé ET le .js ET l'image dans le dossier ou se trouve le template.

question:
est ce que (dans le bout de code ci-dessous) je dois remplacer les 'src' par quelque chose ?

Code :

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

1
2
3
4
5
 
$("#imgPopup").attr("src", obj.data("src")).css({
					width: obj.data("width"),
					height: obj.data("height")
				});

Merci d'avance, !

**danielhagnoul** · 26/10/2010, 23h05

Bonsoir

Le code de mon exemple forme un tout. Si vous n'en utilisez qu'une partie, il faut bien sûr restaurer la cohérence de la partie utilisée.

Code :

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

$("#imgPopup").attr("src", "../images/imageTest.png").css({width: "400px", height: "200px"});

image pop up au démarrage

jQuery

Discussions similaires

Partager

Partager