Bonjour, je possède un code java pour l’ouverture d’une fenêtre modale sur un clic de souris, je cherche depuis plusieurs jours la manière de modifier le code dans le .html et/ou le .js pour une ouverture automatique de cette fenêtre à l’ouverture de la page et je n’ai rien trouver qui fonctionne. Je pense que cela est simple pour un expert, mais pour un néophyte comme moi rien n’est simple. Pourriez-vous m’aider si vous le voulez bien ?
Merci par avance.

le html
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" >
<head>
   <head>
      <title></title>
      <!-- On importe la bibliothèque JQuery-->
      <script src="jquery-1.10.1.min.js" type="text/javascript"></script>
      <link rel="stylesheet" href="style.css" type="text/css" title="Default"/>
   </head>
   <body>
      <div id="fond"></div>
    <a href="#" id="show">Afficher la fenetre modale</a>
      <script src="modal.js" type="text/javascript"></script>
      <div id="modal" class="popup"></div>
   </body>
</html>



le js
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
$(document).ready(function() {
 
   // Lorsque l'on clique sur show on affiche la fenêtre modale
   $('#show').click(function (e) {
       //On désactive le comportement du lien
        e.preventDefault();
      showModal();
 });
 
   // Lorsque l'on clique sur le fond on cache la fenetre modale   
   $('#fond').click(function () {
      hideModal();
    });
 
   // Lorsque l'on modifie la taille du navigateur la taille du fond change
   $(window).resize(function () {
      resizeModal()
   });
 
});
function showModal(){
   var id = '#modal';
   $(id).html('Voici ma fenetre modale<br/><a href="#" class="close">Fermer la fenetre</a>');
 
   // On definit la taille de la fenetre modale
   resizeModal();
 
   // Effet de transition     
   $('#fond').fadeIn(1000);   
   $('#fond').fadeTo("slow",0.8);
   // Effet de transition   
   $(id).fadeIn(2000);
 
   $('.popup .close').click(function (e) {
      // On désactive le comportement du lien
      e.preventDefault();
      // On cache la fenetre modale
      hideModal();
    });
}
function hideModal(){
   // On cache le fond et la fenêtre modale
   $('#fond, .popup').hide();
   $('.popup').html('');
}
function resizeModal(){
   var modal = $('#modal');
   // On récupère la largeur de l'écran et la hauteur de la page afin de cacher la totalité de l'écran
   var winH = $(document).height();
   var winW = $(window).width();
 
   // le fond aura la taille de l'écran
   $('#fond').css({'width':winW,'height':winH});
 
   // On récupère la hauteur et la largeur de l'écran
   var winH = $(window).height();
   // On met la fenêtre modale au centre de l'écran
   modal.css('top', winH/2 - modal.height()/2);
   modal.css('left', winW/2 - modal.width()/2);
}