Discussion :

[Nico1131]

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


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