Question

问题

Jquery UI overylay导致浏览器的滚动条显示出来。我使用的是最新的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主题）时，问题又出现了。如果我在两个窗口中使用（带主题）两者都可以使用主题。

有没有人遇到过类似的问题？

Answer 1

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

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

Answer 2

我使用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()

更改叠加层的宽度。

Answer 3

有没有人遇到过类似的问题？

我已经和我在CSS中添加了以下内容。在不需要时，它会将页面上的滚动条始终置于非活动状态。当某些内容添加到激活滚动条的页面时，它会阻止页面显示为“跳转”。

html {overflow-y: scroll;}

不确定它是否适用于您的主题，但值得一试。

Jquery UI对话覆盖高度＆amp;宽度与窗口大小不匹配

3 个答案: