ModalPopupExtender не работает на макете фрейма IE6

Я использую макет «рамки», аналогичный макету в this excellent answer: div #top в верхней части страницы, div # слева и div #main с основным контентом. #top и #left divs содержат меню навигации.ModalPopupExtender не работает на макете фрейма IE6

Теперь я хочу использовать всплывающее div, используя AjaxControlToolkit ModalPopupExtender внутри содержимого (#main) div.

Это отлично работает на IE8 (где #top, #left, #main все имеют фиксированную позицию), но когда я запускаю его на IE6, модальный фон покрывает только #main div - мне нужно его для покрытия всю страницу, включая #top и #left navigation divs.

Рассматривая скрипт для ModalPopupExtender, он, похоже, ищет родительскую иерархию, пока не найдет родителя с относительной или абсолютной позицией. И в рендеринге IE6, #main div имеет положение: абсолютное, потому что позиция: фиксированная не поддерживается, что, я думаю, объясняет, что происходит.

Любые предложения по наилучшему/простейшему способу работы с IE6? В идеале без изменения кода ModalPopupExtender, но я сделаю это, если потребуется, и это лучшее решение.

источник

2010-06-15 Joe

Я реализовал вариант решения в this answer, который появляется, чтобы решить эту проблему:

Для IE6, условно сделать положение #main Div: статический с Маржа налево равна ширину #left div. К сожалению, крайний край не работает в IE6, поэтому ...
Для IE6 условно добавьте пустой div с id ie6-spacer перед основным div.
Установите высоту деления ie6-spacer на ту же высоту, что и #top div.

Это похоже на трюк.

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

источник

2010-06-22 10:34:23 Joe

Приятно, что вы нашли это решение, но я не думаю, что он опрятный. Я также использовал эти всплывающие окна, и поместил модальный диалог div отдельно от '# top',' # left' и '# main' (и т. Д.) Со 100% шириной и высотой и большим z-индексом , охватывая все, когда он был показан (с небольшой прозрачностью). Над этим я положил div, содержащий диалоговую панель. Но так или иначе, это работает на вас, поэтому кто заботится ... –

@Marcel, спасибо за комментирование, и я, безусловно, открыт для лучших решений. Моя проблема в том, что я использую ASP.NET WebForms и AjaxControlToolkit, поэтому у вас не так много контроля над размещением div. В настоящее время у меня есть главная страница с базовым макетом (верхние/левые/главные div и навигация) и вложенная главная страница для страниц, в которых используются всплывающие окна, содержащие местозаполнитель для основного контента, ModalPopupExtender и местозаполнитель для всплывающего содержимого , Таким образом, содержимое основной страницы главной страницы находится внутри главного div. разработчикам приложений нужно только сосредоточиться на предоставлении основного и всплывающего содержимого. – Joe

Привет, Джо, я уже думал, что у вас есть такие ограничения. Поскольку у меня нет каких-либо знаний ASP.NET, я не могу дать вам советы по использованию WebForms и AjaxControlToolkit. Но то, что я уже сказал: если он не сломался, не исправить это! –

ModalPopupExtender не работает на макете фрейма IE6

ответ

Смежные вопросы