ModalPopupExtender ne fonctionne pas sur la mise en page IE6

J'utilise une disposition de «trame» similaire à celle de this excellent answer: un div #top en haut de la page, un div # gauche sur la gauche, et un div #main avec le contenu principal. Les divs #top et #left contiennent des menus de navigation.ModalPopupExtender ne fonctionne pas sur la mise en page IE6

Maintenant, je veux utiliser une div popup en utilisant AjaxControlToolkit ModalPopupExtender dans le contenu (#main) div.

Cela fonctionne très bien sur IE8 (où #top, #left, #main ont tous la position: fixed), mais quand je l'exécute sur IE6, l'arrière-plan modal ne couvre que le div #main - j'en ai besoin pour couvrir l'ensemble de la page, y compris les divs de navigation #top et #left.

En regardant le script pour ModalPopupExtender, il semble rechercher la hiérarchie parent jusqu'à ce qu'il trouve un parent avec la position relative ou absolue. Et dans le rendu IE6, le #main div a la position: absolute car la position: fixed n'est pas supportée, ce qui, je suppose, explique ce qui se passe.

Des suggestions pour le meilleur/le plus simple pour que cela fonctionne correctement sur IE6? Idéalement, sans modifier le code ModalPopupExtender, mais je le ferai si je le dois et c'est la meilleure solution.

Source

2010-06-15 Joe

J'ai mis en œuvre une variante de la solution dans this answer, qui semble résoudre le problème:

Pour IE6, faire la condition #main position div: statique avec une marge gauche égale à la largeur de la div #left. Malheureusement, margin-top ne semble pas fonctionner dans IE6, alors ...
Pour IE6, ajoutez un div vide avec l'ID ie6-spacer avant le div principal.
Réglez la hauteur du div ie6-espaceur à la même hauteur que la div # haut.

Cela semble être l'astuce.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>'Frames' using &lt;div&gt;s</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #top, #left, #main { 
     position: fixed; 
     overflow: hidden; 
    } 

    #top { 
     top: 0; 
     width: 100%; 
     background-color: #ddd; 
     height: 100px; 
    } 

    #left { 
     left: 0; 
     top: 100px; /* move everything below #top */ 
     bottom: 0; 
     background-color: #bbb; 
     width: 120px; 
    } 

    #main { 
     top: 100px; 
     left: 120px; 
     bottom: 0; 
     right: 0; 
     overflow: auto; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style> 
    #top, #left { 
     position: absolute; 
    } 

    #ie6-spacer { 
     height:100px; 
    } 

    #left { 
     height: expression((m=document.documentElement.clientHeight-100)+'px'); 
    } 

    #main { 
     margin-left:120px; 
     height: expression((m=document.documentElement.clientHeight-100)+'px'); 
     width: expression((m=document.documentElement.clientWidth-120)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="top">Title<br /></div> 
    <div id="left">LeftNav<br /></div> 
    <!--[if IE 6]> 
    <div id="ie6-spacer"></div> 
    <![endif]--> 
    <div id="main"> 
    <p> 
     Lorem ipsum ...<br /> 
     <!-- just copy above line many times --> 
    </p> 
    </div> 
</body> 
</html>

Source

2010-06-22 10:34:23 Joe

Bien, vous avez trouvé cette solution, mais je ne pense pas que ce soit un bon choix. J'ai aussi utilisé ce type de pop-up et mis un séparateur modal-dialog à part de # top, # left et # main (avec 100% width et height et un grand z-index , couvrant tout quand il était affiché (avec un peu de transparence). Au-dessus de celui-là, j'ai mis la div contenant le panneau de dialogue. Mais de toute façon, ça marche pour vous, alors qui s'en soucie ... –

@Marcel, merci pour vos commentaires, et je suis certainement ouvert à de meilleures solutions. Mon problème est que j'utilise ASP.NET WebForms et AjaxControlToolkit, donc je n'ai pas autant de contrôle sur le placement de la div. Actuellement, j'ai une page maître avec la mise en page de base (div/top/left/main) et une page maître imbriquée pour les pages qui utilisent des popups contenant un espace réservé pour le contenu principal, un ModalPopupExtender et un espace réservé pour le contenu popup . Le contenu de la page maître imbriquée se trouve donc dans la div principale. Les développeurs d'applications doivent uniquement se concentrer sur la fourniture du contenu principal et contextuel. – Joe

Bonjour Joe, je pensais déjà que vous aviez de telles restrictions. Comme je n'ai aucune connaissance d'ASP.NET, je ne peux pas vous conseiller sur l'utilisation de WebForms et AjaxControlToolkit. Mais ce que j'ai déjà dit: si ce n'est pas cassé, ne le répare pas! –

ModalPopupExtender ne fonctionne pas sur la mise en page IE6

Répondre

Questions connexes