Position overlay d'un Dialog sous IE

**Nico1131** · 02/05/2014, 09h54

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).
Nom : bug01.JPG
Affichages : 126
Taille : 115,5 Ko

Nom : bug01.JPG
Affichages : 126
Taille : 115,5 Ko

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 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
$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 css :

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

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

**feecochette** · 02/05/2014, 13h36

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

**Nico1131** · 02/05/2014, 14h35

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 html :

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
<!-- =================================-->
<!-- 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>

**Nico1131** · 06/05/2014, 16h59

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 html :

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

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

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

Position overlay d'un Dialog sous IE [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager