Fenêtre modale avec CSS et jQuery

**ch851** · 04/09/2014, 19h31

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);
}

**freddou17** · 05/09/2014, 09h07

Slt,

Pour ma part j'utilise FancyBox, regardes sur internet c'est assez simple.

++

**ch851** · 05/09/2014, 13h44

Je n'ai rien trouvé sur FancyBox pour modifier le code si dessus et sur Internet, je cherche toujours, merci quand même pour votre réponse.

**freddou17** · 05/09/2014, 14h07

le html de la popup: test.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
 
<html>
	<body>
		<div class="various" id="enTeteModale">
			<h3>Paramétrer son environnement!</h3>
                 </div>
        <body>
</html>

le code qui ouvre la popup

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
      $(document).ready(function(){
				$.ajax({
		        	type: "GET",
				    url: "test.xml",
				    dataType: "xml",
				    success: function(xhr) {
			               $.fancybox(xhr)
		                    }
				});
		    });

Je ne t'ai pas dit de modifier ton code je te donnais une piste pour ne réécrire du code existant...
Rassure moi tu utilise bien Jquery car la notation suivante le laisse pensé?

Code :

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

1
2
 
$(document).ready(function() {...

Bon courage et dis nous ce que tu ne comprends pas si jamais quelque chose t'échappe
++

**ch851** · 05/09/2014, 15h04

À vrai dire vous l’avez constaté je ne sais pas lire les lignes de codes, je sais à peu près les placer sur un site, mais sans plus. Pour répondre à votre question si j’utilise Jquery, je pense que oui, mais je vous montre tous les fichiers avec lesquels la modal fonctionne. Enfin, vous aurez essayé et moi aussi, mais bon, je ne veux abuser de votre gentillesse, merci encore.

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

modal.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);
}

style.css

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
/* CSS Document */
#fond {
   position:absolute;
   z-index:9000;
   background-color:#000;
   display:none;
   border-radius: 10px;
}
 
.popup {
   position:fixed;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;
   border-radius: 10px;
   background-color: white;
   border: 1px solid grey;
}
 
#modal {
   width:300px;
   height:200px;
}

et le jquery-1.10.1.min.js

Fenêtre modale avec CSS et jQuery

Développement Web en Java

Discussions similaires

Partager

Partager