image pop up au démarrage

Version imprimable

21/10/2010, 16h49
horkets

image pop up au démarrage
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:

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 :)
21/10/2010, 17h22
coach759

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.
22/10/2010, 15h09
horkets

Salut,
Un exemple serait le bien venu ...
Sinon, sans CSS comment devrais je m'y prendre ?
Merci d'avance,
H
23/10/2010, 02h33
mdaniel

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.

Bonsoir

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

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

25/10/2010, 14h28
horkets
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:

1 2 3 4 5 $("#imgPopup").attr("src", obj.data("src")).css({ width: obj.data("width"), height: obj.data("height") });
Merci d'avance, !
26/10/2010, 23h05
danielhagnoul

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:

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