Модальные диалоговые полосы прокрутки IE7 перекрывают содержимое - PullRequest
Новая
       14

Модальные диалоговые полосы прокрутки IE7 перекрывают содержимое

3 голосов
/ 01 мая 2009

Вот неправильный код. Чтобы проверить это, сохраните его в файле с именем «test.html» и нажмите кнопку в верхнем левом углу. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Blarg</title>
  <style type='text/css'>
    body { margin: 20px; }
    #test { background: red; height: 2000px; }      
  </style>    
 </head>

 <body>
  <div id="test"><input type='button' onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" /></div>  
 </body>
</html>

Если я открою страницу в обычном окне IE7, все будет нормально.

Однако, если я открою его в модальном диалоговом окне IE7, он будет рисовать вертикальную полосу прокрутки в верхней части поля. Что еще хуже, поскольку он рисует полосу прокрутки в верхней части поля, он также вызывает горизонтальную полосу прокрутки.

Как мне обойти это? Я обязательно должен использовать модальное диалоговое окно IE, я не вправе это менять.

Ответы [ 4 ]

3 голосов
/ 27 июля 2009

Измените параметры window.showModalDialog, чтобы использовать width: 300px вместо dialogWidth: 300px - горизонтальная полоса прокрутки исчезает, а вертикальная полоса прокрутки находится справа от поля.

1 голос
/ 20 апреля 2010

Как вы упоминаете, модальное диалоговое окно IE не совсем работает как обычное окно браузера. Пробуя разные вещи, вы можете как-то перепроектировать, как это работает, и использовать некоторые компенсирующие приемы. Вы заявили, что у вас есть контроль над HTML, что можно использовать Javascript, так что вот что я придумал. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Blarg 2</title>
  <style type='text/css'>
    body { margin: 20px; width:1px}
    #test { background: red; height: 500px; }          
  </style>

   <script>
     window.onload=windowResized;
     window.onresize=windowResized;

     function windowResized()
     {
       var cw = document.documentElement.clientWidth ;
       var margin = 20 ;
       document.getElementById("test").style.width=(cw-2*margin)+"px" ;
     }
   </script>
 </head>
 <body>
  <div id="test" >
    <input type='button' 
 onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes;');" />
    There is a bit more than meets the eye here.
  </div>  
 </body>
</html>

Суть этого кода заключается в изменении ширины <div>, содержащей содержимое. Обычно эта ширина будет шириной окна (меньше полей), но в случае модального диалога IE, мы должны использовать ширину окна меньше ширины полосы прокрутки. Это дано нам document.documentElement.clientWidth. Мы делаем это изменяя размер, когда диалог загружается и всякий раз, когда он изменяется.

Начальная ширина тела (при загрузке, но до изменения размера <div>), похоже, сбивает с толку IE, поэтому мы установили ее на 1px. Так что это «магическое число» в коде, как и var margin = 20 ;, которое должно соответствовать CSS margin. Я также установил div height на 500px, чтобы было легче видеть, что происходит, когда вертикальная полоса прокрутки включена или выключена.

Я проверял это в IE6 / 7/8 и Chrome на Windows XP, а также FF3.6 и Chrome на Mac. Я сделал код здесь максимально простым, поэтому, если содержание вашего div станет более сложным, надеюсь, вы сможете изменить Javascript по мере необходимости. Надеюсь, что это работает для вас.

1 голос
/ 01 мая 2009

Добавьте 20px поле справа от #test и увеличьте ширину диалога:

http://jsbin.com/ujevu

У вас все еще будет горизонтальная полоса прокрутки, но по крайней мере содержимое не будет скрыто.

0 голосов
/ 10 мая 2009

Вы можете обойти эту проблему, выполнив то, что предлагает brianpeiris (добавьте поле для полосы прокрутки) и добавив overflow-x: hidden; CSS для вашего элемента HTML. Это скроет горизонтальную полосу прокрутки.

IE, кажется, действительно странно относится к модальным окнам, поэтому большинство нормальных идей (изменение размера окна javascript, фиксированная ширина пикселя css) не работают внутри "модального окна IE"

-

Кроме того, вы можете просто добавить флаг к вашему вызову showModalDialog, чтобы полностью удалить полосы прокрутки, не изменяя html / css.

Документация о том, как это сделать, доступна в документации MSDN. http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx

В вашем коде, если вы хотите удалить полосы прокрутки, это будет выглядеть примерно так 

onclick="javascript:window.showModalDialog('test.html', window, 'dialogWidth: 300px; resizable: yes; scroll:off;');"
...