Discussion :

[thebarbarius]

Bonjours,

J'ai suivis ce petit tutoriel pour la création d'une modal box.

Mais helas cela ne me suffit pas, je souhaiterai savoir en plus comment lancer la modalbox au chargement de la page.

Merci

[Finality]

Coucou,

pour faire propre, j'ai séparé l'évènement click de ton lien avec l'affichage du dialog en elle même. Ceci te permettra ainsi de faire appel à ton dialog, de n'importe où de ton JS. Voici le JS que j'obtiens :

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
 
$(document).ready(function() {
 
   //on affiche le dialog à l'ouverture de la page
   showDialog('#dialog2');	
 
   //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');
 
      showDialog(id);
 
   });
 
   //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();
   });			
 
});
 
function showDialog(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()/2);
   $(id).css('left', winW/2-$(id).width()/2);
 
   //transition effect
   $(id).fadeIn(2000); 
}

Comme tu peux le voir, la fonction showDialog attend en paramètre le sélecteur du div à afficher

[thebarbarius]

Merci beacoup du coup de main