Javascript IE7模式对话框滚动条重叠内容_Javascript_Css_Internet Explorer 7_Scrollbar_Modal Dialog

Javascript IE7模式对话框滚动条重叠内容

javascript css

Javascript IE7模式对话框滚动条重叠内容,javascript,css,internet-explorer-7,scrollbar,modal-dialog,Javascript,Css,Internet Explorer 7,Scrollbar,Modal Dialog,这是违规代码。要测试它，请将其保存在名为“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 t

这是违规代码。要测试它，请将其保存在名为“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>


布拉格
正文{页边距：20px；}
#测试{背景：红色；高度：2000px；}

如果我在正常的IE7窗口中打开页面，它工作正常

但是，如果我在IE7模式对话框中打开它，它会在边距顶部绘制垂直滚动条。更糟糕的是，由于它将滚动条绘制在页边空白的顶部，它还导致绘制水平滚动条

我如何解决这个问题？我绝对必须使用IE模态对话框，我无权更改它。

在#test的右侧添加一个20px的边距，并增加对话框的宽度：

您仍将有一个水平滚动条，但至少内容不会被遮挡。

您可以按照brianpeiris的建议（为滚动条添加边距）并添加溢出-x:hidden；将css添加到html元素中。这将隐藏水平滚动条

IE似乎对模态窗口的处理非常奇怪，所以大多数正常的想法（javascript窗口大小调整、css固定像素宽度）在“IE模态窗口”中都不起作用

此外，您只需在showModalDialog调用中添加一个标志，即可完全删除滚动条，而无需更改任何html/css

MSDN文档中提供了有关如何执行此操作的文档

在您的代码中，如果您想删除滚动条，它看起来会像这样

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

更改window.showModalDialog选项以使用width:300px而不是dialogWidth:300px-水平滚动条消失，垂直滚动条位于页边空白的右侧。

如您所述，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>


布拉格2
正文{边距：20px；宽度：1px}
#测试{背景：红色；高度：500px；}
window.onload=windowResized；
window.onresize=windowResized；
函数windowResized（）
{
var cw=document.documentElement.clientWidth；
var保证金=20；
document.getElementById（“test”）.style.width=（cw-2*边距）+“px”；
}
这里有一点不尽如人意。

此代码的关键是调整包含内容的

的宽度。通常这个宽度是窗口的宽度（减去边距），但是在IE模式对话框的情况下，我们应该使用窗口的宽度减去滚动条的宽度。这是由

document.documentElement.clientWidth

提供给我们的。我们在加载对话框时以及在调整对话框大小时进行调整

车身的初始宽度（在加载时，但在调整

大小之前）似乎会混淆IE，因此我们将其设置为

1px

。这是代码中的一个“幻数”，就像

var margin=20一样，必须与CSS边距
匹配。我还将div height
设置为500px
，以便更容易看到垂直滚动条打开或关闭时发生的情况
我已经在IE6/7/8和Windows XP上的Chrome以及Mac上的FF3.6和Chrome上测试过了。我已经使这里的代码尽可能简单，因此如果div
的内容变得更复杂，希望您能够根据需要修改Javascript。希望这对您有用。
这对我来说不是一个真正的解决方案。我希望它能正常工作。你是说你想避免水平滚动条？是的。我不明白它怎么能在普通窗口中正常工作，但在模式窗口中却不行。这让我很烦恼。是的，问题是我希望用户能够在需要时（即，如果内容太大而无法容纳）同时垂直和水平滚动。我不明白为什么IE设计师决定让模式窗口与常规窗口如此不同？这没有多大意义。为什么不让它成为一个正常的窗口（以编程方式），恰好是模态的？现在唯一的问题是width:300px
在Firefox中不起作用。事实上，我重新检查了这个，它并没有解决问题。它只是让它忽略了宽度。你能详细说明一下基本规则吗？您希望IE7模式对话框适用于任何URL，还是仅适用于您创建的HTML？HTML是否仅限于此处的内容？允许使用Javascript吗？看来IE模态对话框不同于IE窗口和其他浏览器模态对话框，所以我们不能在水上行走。我控制HTML，HTML基本上就是我这里的HTML，除了高度没有设置为2000px（而是随着内容而增长），它只需要用于模式对话框，需要在IE和Firefox上工作。JavaScript当然是允许的。此外，水平滑块需要消失，除非宽度比dialogWidth宽。@Brainjam，我刚刚尝试了一下。这无疑是一个进步，但你仍然可以看到底部滚动条，这很糟糕，但我想这最终是不可避免的。@cdmckay：当我提交这个答案时，底部滚动条没有出现，但我使用的是32位XP。在您今天的回复之后，我在IE8/64bit/Windows7上尝试了这个，并得到了底部的滚动条。所以，phooey，这似乎取决于平台。出于好奇，你在测试什么？@cdmckay：我看得更远一点，当我将IE8更改为兼容模式或IE7标准模式时，对话框中没有底部滚动条。所以我觉得自己是正确的。我在IE8标准模式下使用64位Windows Vista。@cdmckay：是的，在IE8标准模式下肯定不起作用。你有什么理由用这种方法来表述原始问题吗