plugin SimpleModal, comment afficher le dialogue modal au chargement de la page ?

Version imprimable

salut j'ai trouver un plugin modal show qui affiche une fenetre ou moment que je clique sur un lien .
moi je veux changer l'affichage par onload (au moment de chargement de la page :(.

le probleme que je suis debutant on jquery et j'en sais pas ou mettre l'evenement onload Merci

voila code

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
<script>
 
$(document).ready(function() {	
 
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
 
		//Get the A tag
		var id = $(this).attr('href');
 
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
 
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
 
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
 
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
 
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
 
		//transition effect
		$(id).fadeIn(2000); 
 
	});
 
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
 
		$('#mask').hide();
		$('.window').hide();
	});		
 
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
 
});
 
</script>

Voici Demo : http://www.queness.com/resources/htm...al-window.html

09/03/2010, 23h23
danielhagnoul
Bonsoir.

Documentation : http://www.queness.com/post/77/simpl...indow-tutorial

Souvent il suffit de lire la documentation jusqu'au bout ! ;)
Citation:
Launch modal window with Javascript

Due to popular demand :), I have an example for it. The concept is simple. I wrapped the modal window script inside a function, and then you will able to call the modal window using javascript function call.

Yes, you will able to load the modal window on page load as well :)

Code:

1 2 3 4 $(document).ready(function () { //id is the ID for the DIV you want to display it as modal window launchWindow(id); });
10/03/2010, 11h32
sooprano
Citation:

$(document).ready(function () {
//id is the ID for the DIV you want to display it as modal window
launchWindow(id);
});

oops j'ai pas fais attention ;) ainsi j'ai introduis ses lignes
Code:

1 2 3 4 $(document).ready(function () { //id is the ID for the DIV you want to display it as modal window launchWindow(id); });
Code:

1 2 3 4 5 6 $(document).keyup(function(e) { if(e.keyCode == 13) { $('#mask').hide(); $('.window').hide(); } })
j'ai changer la ligne

Citation:

$(document).keyup(function(e)

par

Citation:

$(document).load(function(e) {
if(e.load) {
$('#mask').hide();
$('.window').hide();
}
})

pour la première sa marche si je presse sur touche entrer ?
mais moi je veux autrement je veux simplement que Mon Modal Apparait au moment de chargement de la page :( , j'en sais pas comment faire j'en sais pas comment donner un evenement onload (en javascript) a un body :(
10/03/2010, 21h57
Sourrisseau

Il est important
pour qu'on puisse t'apporter une réponse claire d'avoir une et une seule demande à la fois.

Là tu as une 2 demandes la première concerne l'ouverture de ta boite au chargement de la page :
Code:

1 2 3 4 $(document).ready(function () { launchWindow(id); });
Ici le id correspond à un attribut id d'une élément du DOM, par exemple :
Code:

1 2 3 4 $(document).ready(function () { launchWindow('#mon_modal'); });
Ce point est il clair ?

Concernant 'donner un évènement onload' , c'est le code qui entoure la fonction launchWindow(); qui réalise cela :
Code:

1 2 3 4 $(document).ready(function () { // le code sera exécuté après le chargement de la page });
Est ce que ce point est éclaircie ?
Si c'est le cas précise le dans une réponse et clique sur 'Résolu'.

S'il te plaît n'aborde pas ici d'autres questions sinon cela sera trop confus ... merci !!! ;)

en fete je connais le principe du javascript
Code:

1 2 3 4 <script> function modal(){ }
Code:

<body onload="modal();">

:(

en jquery vraiment je suis nul et j'arrive pas a faire apparaitre un modal ou Popin via jquery :(
tous les tutos que j'ai trouver sont toujours cibler a cliquer sur un lien est afficher un Modal . mais moi mon client Veux un Modal qui s'affiche au chargement de la page :(
malgré la reponse que tu m'as donner j'ai pas eu du meilleur resultat voila ce que j'ai fais
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 <html> <head> <title>Simple JQuery Modal Window from Queness</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> $(document).ready(function () { //id is the ID for the DIV you want to display it as modal window launchWindow(boxes); }); </script> </head> <body> <div id="boxes"> <div id="dialog" class="window"> Simple Modal Window | <a href="#"class="close"/>Close it</a> <br /> <a href="http://www.selectcom.ma" target="_blank"><img src="images/selectcom.jpg" border="0" /></a> </div>  <div id="mask"></div> </div> </body> </html>
voila je veux apparaitre <Div id="boxes"> qui contient une image cliackable

sa marche pas ainsi j'ai une erreur en extension mozila (web developper) illegale caractere si je mis

Citation:

launchWindow('#boxes');

et LunchWindow is not defined si je mis

Citation:

launchWindow(boxes); :(

11/03/2010, 14h14
Sourrisseau

Normalement
la fonction suivante
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> $(document).ready(function () { //id is the ID for the DIV you want to display it as modal window launchWindow('#boxes'); }); </script>
ne devrait pas générer 'illegale caractere'.

Par contre l'erreur suivante : LunchWindow is not defined , voudrais dire soit que tu n'as pas chargé le fichier js qui fait ton effet, soit tu as mal écris puisque le nom de la fonction est : launchWindow et non pas LunchWindow;
11/03/2010, 15h44
sooprano

j'ai modifier

Citation:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

par

Citation:

<script type="text/javascript" src="js/jquery.js"></script>

j'ai copie la fonction

Citation:

launchWindow

Correctement :(

toujour le meme message en web developer

Citation:

launchWindow is not defined

sa fais 3 jours maintenant que je trouve difficulté a realisé un modal (Pop-in) au chargement de la page :(

Alors je pense avoir trouve

la solution. En fait la fonction qu'il propose n'est pas directement dans la page principale. Mais dans la page de démo:

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
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
 
$(document).ready(function() {	
 
	//Put in the DIV id you want to display
	launchWindow('#boxes');
 
	//if close button is clicked
	$('.window #close').click(function () {
		$('#mask').hide();
		$('.window').hide();
	});		
 
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
 
});
 
function launchWindow(id) {
 
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
 
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
 
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
 
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
 
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height());
		$(id).css('left', winW/2-$(id).width()/2);
 
		//transition effect
		$(id).fadeIn(2000); 
 
 
}
 
</script>

C'est clair que ce n'était pas trop évident à trouver et que la personne qui a présenté sa fonction aurait du être plus clair.

Bon normalement cela devrait marché !!! :roll:

Citation:

Envoyé par Sourrisseau

la solution. En fait la fonction qu'il propose n'est pas directement dans la page principale. Mais dans la page de démo:

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
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
 
$(document).ready(function() {	
 
	//Put in the DIV id you want to display
	launchWindow('#boxes');
 
	//if close button is clicked
	$('.window #close').click(function () {
		$('#mask').hide();
		$('.window').hide();
	});		
 
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
 
});
 
function launchWindow(id) {
 
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
 
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
 
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
 
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
 
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height());
		$(id).css('left', winW/2-$(id).width()/2);
 
		//transition effect
		$(id).fadeIn(2000); 
 
 
}
 
</script>

C'est clair que ce n'était pas trop évident à trouver et que la personne qui a présenté sa fonction aurait du être plus clair.

Bon normalement cela devrait marché !!! :roll:

Cool ca marche parfaitement merci beaucoup pour ton aide :ccool: t'es meilleur