Question

我目前正在开发一个使用ajax将内容加载到jQuery UI模式对话框中的网站。

在Win7 Firefox，Chrome，Safari和Opera上运行正常。

在Internet Explorer 7-9pp和Mac firefox，chrome，safari和opera上，模态背景图层的大小似乎计算错误，并创建垂直和水平滚动，直到您调整浏览器大小。

我在这里上传了当前的演示版： - （删除以释放我服务器上的某个网站空间，有关问题/解决方案的详细信息，请参阅注释/答案）

基本布局是这样的

<body>
  <div id="wrapper">header, navigation, footer and stuff</div>
  <div class="ui-dialog"></div>
  <div class="ui-widget-overlay"></div>
</body>

具有以下样式

html { height: 100%; overflow-y: scroll; }
body { display: block; height: 100%; margin: 0; padding: 0; }
.ui-widget-overlay { position: absolute; bottom: 0; left: 0; }

提前感谢所有事情。

Answer 1

为HTML标记，在css文件style.css中有overflow-y:scroll。删除它并添加overflow:hidden;

Answer 2

添加overflow:hidden对我没有任何帮助，即使我打开Chrome的开发者工具并手动添加它，或者试图让它变得重要：

style="overflow:hidden !important"

当显示jQuery对话框时，摆脱那些恼人的滚动条是什么？是添加这个CSS：

.ui-widget-overlay
{
    width:100% !important;
    height:100% !important;
}

简单，嘿？

奇怪的是，jQueryUI默认不包括这个......

jQUery UI对话框 - 模态创建滚动条，错误的维度？

2 个答案: