Discussion :

[sooprano]

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 :

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

[danielhagnoul]

Bonsoir.

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

Souvent il suffit de lire la documentation jusqu'au bout !

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 :

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

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

[sooprano]

$(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 :

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

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 :

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

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

j'ai changer la ligne

$(document).keyup(function(e)

par

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

[Sourrisseau]

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 :

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

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 :

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

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 :

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

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

[sooprano]

en fete je connais le principe du javascript

Code :

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

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

Code :

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

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

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
 
<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>
 
 
<!-- Mask to cover the whole screen -->
  <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

launchWindow('#boxes');

et LunchWindow is not defined si je mis

launchWindow(boxes);

[Sourrisseau]

la fonction suivante

Code :

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

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;