3

これが問題のコードです。テストするには、「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

4 に答える 4

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、垂直スクロールバーがオンまたはオフのときに何が起こるかを簡単に確認できるようにしました。

これは、WindowsXPのIE6/ 7/8とChrome、およびMacのFF3.6とChromeでテストしました。ここでのコードは可能な限り単純にしているので、内容がdivより複雑になった場合は、必要に応じてJavascriptを変更できるようになります。これがあなたのために働くことを願っています。

于 2010-04-19T23:47:07.637 に答える
1

#testの右側に20pxの余白を追加し、ダイアログの幅を広げます。

http://jsbin.com/ujevu

水平スクロールバーは引き続き表示されますが、少なくともコンテンツが隠されることはありません。

于 2009-05-01T18:35:46.700 に答える
0

brianpeirisが提案すること（スクロールバーのマージンを追加）を実行し、overflow-x：hidden;を追加することで、この問題を回避できます。html要素へのcss。これにより、水平スクロールバーが非表示になります。

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;');"
于 2009-05-10T18:18:28.947 に答える