fenetre modale en jquery

**diengkals** · 07/08/2013, 12h49

bonjour j'ai des pages que je veux ouvrir en fenetre modale pour cela j'ai suivi ce tuto http://sohtanaka.developpez.com/tuto...css-et-jquery/ qui est bien fait mais ya quelques chose qui me manque car moi je veux envoyer des variables lorsque je clique sur le lien et ouvrir une page extérieur

bon voici mon code
page acceuil qui affiche un tableau

Code php :

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
 
   <?php
	       require("../main.inc.php");
	    ?>
 <html>
   <head>
     <title>recouvrement</title>
	  <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<link rel="stylesheet" href="css/jquery-ui.css">
	<link rel="stylesheet" href="css/style.css">
   </head>
   <body>
         <table>
 
		 <tr>
		        <th>Code Agent</th>
				<th>Liste</th>
				<th>Cartographie</th>
		</tr>
		    <?php
			     $connect=mysql_connect('localhost','dolibarrmysql','changeme');
            mysql_select_db('dolibarr');
 
			    $req= mysql_query("select DISTINCT llsextras.c_ag from llx_societe  lls ,  llx_societe_extrafields  llsextras 
				                    where lls.fk_typent=101  and  lls.rowid=llsextras.fk_object  and llsextras.c_ag !='' ");
									  while($datares=mysql_fetch_array($req))
									   {
									     $code_agent=$datares['0'];
 
			?>
		<tr>
              // lien qui vont ouvirir des pages en fenetre modale 
		    <td> <?php echo  $code_agent; ?></td>
			<td><a href="liste_agents.php?code_agent=<?php echo  $code_agent; ?>" class="popup-light" data-popup-class="popup-block" data-popup-width="500px" >liste des agents </a> </td>
			<td><a href="carthographie.php?code_agent=<?php echo  $code_agent; ?>"  class="popup-light" data-popup-class="popup-block" data-popup-width="500px">Carte </a> </td>
		</tr>
		    <?php
			   }
			?>
		 </table>
 
 
 
   </body>
</html>

ma page liste_agent.php qui sera appelé en fentre modale

Code php :

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
 
   <?php
	       require("../main.inc.php");
	    ?>
 <html>
   <head>
     <title>recouvrement</title>
	  <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<link rel="stylesheet" href="css/jquery-ui.css">
	<link rel="stylesheet" href="css/style.css">
 
   </head>
   <body>
      <div class="popup-block">
	       <?php  echo $_GET['code_agent']; ?>
	  </div>
   </body>
 
   </html>

code javascript

Code javascript :

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
 
        $(function(){
            $(".popup-light").click(function() {
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
					.css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });

merci d'avance de votre

**Darkaurora** · 07/08/2013, 13h41

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$( '.selecteur' ).on( 'click', function( ) {
	$.ajax( { 
		type: 'POST',
		url: 'url_de_ta_page',
		data: { 'variable': 'tes_variables' }
	} )
	.done( function( data ) {
		// Ton ouverture de fenêtre ici
		$( '.WindowBody' ).html( data );
	} );
} );

concrètement lorsque tu cliqueras sur ton lien ( alias $( '.selecteur' ) ) tu fais une requête ajax permettant de charger ta page.

dans le callback .done( function( data ) { } ); tu devras insérer le contenu de ta page qui est dans data à l'intérieur du corps de ta fenêtre et penser à l'ouvrir

$( '.WindowBody' ).html( data );