Position overlay d'un Dialog sous IE

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Mon problème est que j'ai créer un Dialog et que sont overlay ne se positionne pas correctement sous IE8.
J'ai fais quelques recherche la dessus sur la classe .ui-widget-overlay et d'après ce que j'ai pu voir le problème est connu et apparemment la solution serait de mettre la position en fixed.

Sauf que oui sa marche mais pas totalement. Sous les autres navigateurs c'est parfait mais sous IE8 l'orverlay se positionne sous le body (je crois).
Pièce jointe 144686

Et voilà le code de la Dialog (pour info le "$j" est tout à fait normal, c'est une variable que j'ai créer avec la méthode jQuery.noConflict() pour éviter tout conflit avec prototype) :
Code:

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 $j("#btnImp").click(function(){ $j( ".myDialog" ).dialog({ title: "Confirmation impression", modal: true, autoOpen : false, draggable: false, closeOnEscape: true, resizable : false, buttons: [{ text: "Continuer", click: function() { imprimer(); $j(this).dialog("close"); } }, { text: "Annuler", click: function() { $j(this).dialog("close"); } }], open: function() { $j( ".ui-dialog" ).css("visibility", ""); $j( ".ui-dialog" ).position({ my: "center", at: "center", of: "body" }); $j(".ui-widget-overlay").css("background", "#aaaaaa").css("opacity", ".3").css("width", "100%").css("height", "100%").css('position', 'fixed'); }, close: function() { $j( ".ui-dialog" ).css("visibility", "hidden"); $j(".ui-widget-overlay").css({background: '', opacity: ''/*, position: 'absolute'*/}); } }).dialog('open'); });
Le css de l'overlay :

Code:

.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;}

02/05/2014, 13h36
feecochette

Bonjour,

J'ai déjà connu ce problème sans vraiment me rappeler de la solution que j'avais apporter.

De souvenir, c'est un problème avec les éléments parents qui ne sont pas en position "absolute" ou quelque chose qui s'y approche.

Avec le code HTML ou une page consultable en ligne serais mieux pour t'aider ...

Salut,

Désolé mais le truc c'est que je travail sur une plateforme Web fait sous Progress donc il est impossible de faire tester mon code par d'autres personnes et aussi du fait que sa reste en gros "confidentiel" mais je peux te montrer la structure.

Après le langage sera clairement pas reconnu par l'éditeur du forum donc je pourrai pas faire grand chose si c'est pas présentable :?
Bien sur j'ai supprimé des lignes car la page en question fait plus de 2000 lignes donc bon voilà, je présente la structure mais je doute qu'elle puisse aider...

Code:

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
<!-- =================================-->
<!-- Realise mensuel                  -->
<!-- =================================-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
 
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<HEAD>
    <META http-equiv="Pragma" content="no-cache">
 
    <TITLE>Realise mensuel</TITLE>
 
    <SCRIPT LANGUAGE="speedscript">
    {liens.i}
   </SCRIPT>
 
<SCRIPT language="javascript1.3">
include('/welitejs/fonctionJQ.js');
 
 
/*** Des fonctions JS ***/
 
 
</SCRIPT>
</HEAD>
 
<BODY>
 
<FORM name="frmReaMensuel">
<SCRIPT LANGUAGE="SpeedScript">
 
    /*** ***/
 
            /*********AFFICHAGE****************/
            cpt2 = 0.
 
          for each wgtecsa use-index s_salcod  break by wgtecsa.salnom by wgtecsa.salpre by wgtecsa.enteta  :
 
 
               assign tm = 0 q = 0 tab_sem = '' dcTotMens = 0.
               cpt2 = cpt2 + 1.
 
               /*******Recherche des bornes superieures de chaque semaine*****/
               do i = 1 to wgtecsa.iNbJour :
                  if weekday(date(int(substring(entry(i,wgtecsa.csadat,';'),4,2)),
                                  int(substring(entry(i,wgtecsa.csadat,';'),1,2)),
                                  int(substring(entry(i,wgtecsa.csadat,';'),7,4)))) = wj2 then
                  do:
                      tab_sem = tab_sem + entry(i,wgtecsa.csadat,';') + ','.
                      q = q + 1.
                  end.
               end.
               tab_sem = substring(tab_sem,1,length(tab_sem) - 1 ).
               /*{&out} "<TR><TD>". ICI*/
 
               {&out} "<div class=divResult>".
 
               {&out} "<TABLE align=center border=0 class=table10 >" . 
 
                   {&out} "<TABLE>".
                   {&out} "<TR><TD>".
 
				   {&out} "</TD></TR>".
				   {&out} "</TABLE>".
               {&out} "</TABLE>".
 
               {&out} "</div>".
                   {&out} "<div class=myDialog style='display: none;'>".
 
                            {&out} "<p>Etes vous sur ?</p>".       
 
                   {&out} "</div>".
 
 
              if cpt2 <> number then  {&out} "<p style='page-break-before:always'></p>".
 
       {PiedPage.i}
 
</script>
 
<script language="Javascript1.3">
 
/*** Du code ***/
 
</script></FORM>
</body>
</html>

06/05/2014, 16h59
Nico1131

Salut,

J'ai résolu mon problème ;)

J'étais entrain de travailler sur les datapicker et du coup j'ai décidé de me faire un thèmes personnalisé sur le site de jQuery UI :
http://jqueryui.com/themeroller/

Et ainsi d'importer tout les composant, car avant j'avais sélectionné que pour les Dialog du coup ma librairie était incomplète.

Finalement tout remarchait niquel pour l'overlay du Dialog (va savoir pourquoi :p ), et j'ai rajouté ce petit morceau de code pour rendre compatible sous IE8 :

Code:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Voilà, j'espère que sa pourra servir à d'autres ;)