Jquery UI 对话框覆盖高度和宽度与窗口大小不匹配

问题

Jquery UI过度使用导致浏览器的滚动条出现。我使用的是最新的Jquery和Jquery UI，没有任何主题。

代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="includes/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="includes/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
</head>
<body>
<a href="#">open modal</a>
<div id="dialog" style="display:none;">test</div>
<script type="text/javascript">
    $('a').click(function () {      
        $('#dialog').dialog({modal: true});
    });
</script>
</body>
</html>

这是非常简单的一个。我不知道为什么它会创建滚动条。

关于这个有什么想法吗？我会很高兴的。

提前谢谢。

p.S.我正在尝试将Jquery UI添加到一个必须使用的主题中。我试着尽可能多地发布CSS规则。

现在我不太确定这个问题是否和FireFox(7.0.1(有关。当我对我正在处理的主题(UI有主题(使用模态对话框窗口并返回test.html(没有UI主题(时，问题再次出现。如果我在两个窗口中都使用(带主题(，两个窗口都可以使用主题。

有人经历过类似的问题吗？

我也遇到了这个问题。添加以下CSS修复了它。

.ui-widget-overlay {
   position: fixed;
}

我使用blockUI解决了问题。

如果有人遇到类似的问题，这里是另一个可能的解决方案；

//Get The Height Of Window
var height = $(window).height();
//Change Overlay Height
$(".jquery-ui-dialog-overlay-element").css('height',height);

如果您遇到与宽度相关的问题，可以将var width = $(window).width();变量添加到页面中，并使用.css((

更改覆盖的宽度

有人经历过类似的问题吗？

我已经在CSS中添加了以下内容。当不需要时，它会使页面上的滚动条始终处于非活动状态。当页面中添加了激活滚动条的内容时，它可以防止页面显示为"跳转"。

html {overflow-y: scroll;}

不确定它是否符合你的主题，但值得一试。

相关内容

最新更新

热门标签：