Bonjour,
Je dois actuellement dev une appli web pour mon stage. Pour l'instant, je me charge de l'agenda..
L'affichage de ce dernier, en php fonctionne très bien.
Mon agenda fonctionnera comme tel :
- il affiche les dispos pour 1 employé particulier, et si l'user click sur une des cellules du tableau, une fenetre apparait affichant les dispos de tous les autres employés pour ce jour donné.

J'ai utilisé un tuto assez simple pour faire une fenêtre modal avec jquery.

Malheureusement, je suis bloqué depuis plusieurs jours car ma fenêtre ne s'affiche pas sous ie6 (soit le navigateur avec lequel je dois dev étant donné qu'il est installé sur tous les pcs de la boite).
Je pense tout simplement que click() ne fonctionne pas sur l'attribut td de mon tableau. (sur firefox, le click sur le td[name=modal] fonctionne très bien)
J'ai réussit à bidouiller quelque chose associant une fonction js lorsqu'on click sur une cellule du tableau pour que cette dernière simule un click sur un lien invisible.... (bref, un truc complétement bancal, surtout que ça ne fonctionnera plus quand je devrai remplir la fenêtre modal en fonction de la cellule clické)

Je ne sais pas si mon explication est très clair, mais je pense que vous comprendrez en lisant le code :p

-> lignes 29, 175


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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml : lang="fr" lang="fr">
 
        <head>
        <script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
        <script type="text/javascript"> 
                 function dialog() {
 
                        //self.location.hash="#dialog";
                        alert("fonction dialog()");
                        document.getElementById("lnkExemple").click(); 
 
 
                }
         $(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');
 
                //var id = "#dialog";
                //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').fadeTo("fast",0.80);        
 
                //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(300);  
 
 
        });
 
 
 
        //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>
                <title>Planning</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
                <link rel="stylesheet" media="screen" type="text/css" title="Design" href="CA.css" />
        </head>
 
        <body>
<?php
if(!isset($_GET['m']) && !isset($_GET['y']))
{
        // Si on ne récupère rien dans l'url, on prend la date du 1er jour du mois actuel.
        $timestamp = mktime(0, 0, 0, date('m'), 1, date('Y'));
}
else
{
        // Sinon on récupère la date du 1er jour du mois donné.
        $timestamp = mktime(0, 0, 0, $_GET['m'], 1, $_GET['y']);
}
 
/* Si le mois et l'année de la variable $timestamp correspondent au mois et à l'année d'aujourd'hui, on retient le jour actuel.
Sinon le jour actuel ne se situe pas dans le mois et on ne retient rien */
if(date('m', $timestamp) == date('m') && date('Y', $timestamp) == date('Y'))
{
        $coloreNum = date('d');
}
 
$m = array("01" => "Janvier", "02" => "Février", "03" => "Mars", "04" => "Avril", "05" => "Mai", "06" => "Juin", "07" => "Juillet", 
                        "08" => "Août", "09" => "Septembre", "10" => "Octobre",  "11" => "Novembre", "12" => "Décembre");
// Les dates en PHP commencent par dimanche !
$j = array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
 
$numero_mois = date('m', $timestamp);
$annee = date('Y', $timestamp);
 
if($numero_mois == 12)
{
        // Dans le cas du mois de décembre
        $annee_avant = $annee;
        $annee_apres = $annee + 1;        // L'année d'après change
        $mois_avant = $numero_mois - 1;
        $mois_apres = 01;                // Le mois d'après est janvier
}
elseif($numero_mois == 01)
{
        // Dans le cas du mois de janvier
        $annee_avant = $annee - 1;        // L'année d'avant change
        $annee_apres = $annee;
        $mois_avant = 12;                // Le mois d'avant est décembre
        $mois_apres = $numero_mois + 1;
}
else
{
        // Il ne s'agit ni de janvier ni de décembre
        $annee_avant = $annee;
        $annee_apres = $annee;
        $mois_avant = $numero_mois - 1;
        $mois_apres = $numero_mois + 1;
}
$numero_jour1er = date('w', $timestamp);  // 0 => Dimanche, 1 => Lundi, 2 = > Mardi...
        
// Changement du numéro du jour car l'array commence à l'indice 0.
if ($numero_jour1er == 0)
{
        /*
                Si c'est dimanche, on le place en 6e position
                (car on commencera notre boucle à 0)
        */        $numero_jour1er = 6; 
}
else
{
        // Sinon on met lundi à 0 ou mardi à 1 ou mercredi à 2...
        $numero_jour1er--;
}
?>
<table>
        <caption class="titre_calendar">
                <?php 
                
                // Affichage du mois et de l'année
                echo '<span >'.$m[$numero_mois].' '.$annee.'</span><br /><br />';
                // Lien pour aller au mois précédent
                echo '<a class="lien_pre" href="?m='.$mois_avant.'&amp;y='.$annee_avant.'"><< précedent</a>';
                // Lien pour aller au mois suivant
                echo '<a class="lien_suiv" href="?m='.$mois_apres.'&amp;y='.$annee_apres.'">suivant >></a>';
                ?>
        </caption>
        <tr>
                <th class="th_calendar">Lun</th>
                <th class="th_calendar">Mar</th>
                <th class="th_calendar">Mer</th>
                <th class="th_calendar">Jeu</th>
                <th class="th_calendar">Ven</th>
                <th class="th_calendar">Sam</th>
                <th class="th_calendar">Dim</th>
        </tr>
        <?php
echo '<tr>'; // Nouvelle ligne du tableau (celle de la 1ère semaine, donc)
        // Écriture de colonnes vides tant que le mois ne démarre pas.
        for($i = 0 ; $i < $numero_jour1er ; $i++)
        { 
                echo "<td class='vide'>" .' '. "</td>";
        }
        for($i = 1 ; $i <= 7 - $numero_jour1er; $i++)
        {        
                echo '<td onclick="dialog()" href="#dialog" name="modal" class="td_calendar"><div class="';
                if(isset($coloreNum) && $coloreNum == $i)
                {
                        echo 'lienCalendrierJour';
                }
                else
                {
                        echo 'lienCalendrier';
                }
                echo '">'.$i.'</div></td>';        
        }
echo '</tr>';
 
$nbLignes = ceil((date('t', $timestamp) - ($i-1)) / 7);
for($ligne = 0 ; $ligne < $nbLignes ; $ligne++)
{
        echo '<tr>'; // Nouvelle ligne du tableau (celle de la nouvelle semaine)
        for($colone = 0 ; $colone < 7 ; $colone++)
        {
                if($i <= date('t', $timestamp))
                {
                        echo '<td onclick="dialog()" href="#dialog" name="modal" class="td_calendar"><div class="';
                        if(isset($coloreNum) && $coloreNum == $i)
                        {
                                echo 'lienCalendrierJour';
                        }
                        else
                        {
                                echo 'lienCalendrier';
                        }
                        echo '">'.$i.'</div></td>';
                }
                else
                {
                        // On a fini d'écrire le mois on termine la tableau par des cellules vides
                        echo "<td class='vide'>" .' '. "</td>";
                }
                $i = $i +1;
        }
        echo '</tr>';
}
?>
</table>
<a href="#dialog" id="lnkExemple" name="modal"></a>
 
<div id="boxes">
 
<div id="dialog" class="window">
Titre | 
<a href="#"class="close"/>Fermer</a>
<?php include('test.php'); ?>
</div>
 
 
<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>
 
 
</body>
</html>
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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
.titre_calendar
{
        margin : auto;
        font-family : "cooper black", "berlin sans FB demi", "calisto MT",  Arial ,Verdana, Impact, serif;
        font-weight : bold;
        margin-bottom : 10px;
        margin-top : 50px;
        color : rgb(79,167,255);
        font-size : 1.3em;
 
}
table 
{
        margin : auto;
        border : 1px outset rgb(79,167,255);
        border-collapse : collapse;
}
.th_calendar
{
        color : rgb(0,54,108);
        background-color : rgb(152,193,243);
        font-size : 0.8em;
        padding-left : 60px;
        padding-right : 60px;
        font-family : Arial ,Verdana, Impact, serif;
}
.td_calendar
{
        text-align : right;
        vertical-align : top;
        border : 1px solid rgb(173,176,201);
        color : grey;
        font-size : 0.5em;
        height : 70px;
}
.vide
{
        background-color : rgb(201,206,223);
}
a
{
        font-weight : bold;
        text-decoration : none;
        color : rgb(0,54,108);
        font-size : 0.6em;
        font-family : Arial ,Verdana, Impact, serif;
}
a:hover
{
        background-color : rgb(152,193,243);
        color : white;
}
.lien_pre
{
        float : left;
        display : block;
        text-align : left;
}
.lien_suiv
{
        float : right;
        display : block;
}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  display:none;
  z-index:9999;
  padding:20px;
  background-color:#ffffff;
}