IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Position overlay d'un Dialog sous IE [UI]


Sujet :

jQuery

  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    143
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2013
    Messages : 143
    Par défaut Position overlay d'un Dialog sous IE
    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

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

  2. #2
    Membre à l'essai
    Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Septembre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Septembre 2013
    Messages : 7
    Par défaut
    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 ...

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    143
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2013
    Messages : 143
    Par défaut
    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>

  4. #4
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    143
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2013
    Messages : 143
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Ascenseur dans une boite de dialog sous visual c++
    Par Minos2 dans le forum Visual C++
    Réponses: 1
    Dernier message: 26/06/2007, 18h40
  2. Dimension des boites de dialog sous 2000,Xp
    Par jhmallot dans le forum MFC
    Réponses: 9
    Dernier message: 17/09/2006, 17h30
  3. Dimension des boites de dialog sous 2000,Xp
    Par jhmallot dans le forum Visual C++
    Réponses: 9
    Dernier message: 17/09/2006, 17h30
  4. Dialog sous Visual C++
    Par jnduf dans le forum MFC
    Réponses: 3
    Dernier message: 27/03/2006, 10h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo