All geek questions in one place

IE7 modified scrollbars overlay content

Here is the abusive code. To test it, save it in a file called "test.html" and click on the button in the upper left corner.

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

If I open the page in a regular IE7 window, it works fine.

However, if I open it in the IE7 modal dialog, it draws a vertical scroll bar over the field. To make matters worse, because it draws a scroll bar over the field, it also causes a horizontal scroll bar to be drawn.

How do I get around this? I absolutely must use the IE modal dialog, I cannot change this.

+3
source share
4 answers

window.showModalDialog, : 300 dialogWidth: 300 - , .

+3

20px #test :

http://jsbin.com/ujevu

, , , .

+1

, 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

, , brianpeiris ( ) -x: hidden; css html. .

, IE - , ( javascript, css) "IE Modal Window"

-

Alternatively, you can simply add a flag to the showModalDialog call to completely remove the scrollbars without changing any html / css.

Documentation on how to do this is available in the MSDN documentation http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx

In your code, if you want to remove scrollbars, it will look something like this.

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

Source: https://habr.com/ru/post/1707492/

More articles:


All Articles