Jquery UI Dialog Overlay Height & Width is not matching the window size
Problem
Jquery UI overylay is causing browser's scroll bars to show up. I am using latest Jquery and Jquery UI without any theme.
Code
<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>
This is extremely simple one. I have no idea why it creates scroll bars.
Any ideas on this one? I will be really glad.
Thank you in advance.
P.S. I'm trying to add Jquery UI to a theme that I have to work with. I tried to eleminate as much as CS开发者_如何学CS rules as I can.
Right now I'm not so sure if this problem is not related to FireFox (7.0.1). When I use modal dialog window on the theme (UI has theme) I am working with and go back to test.html (without UI theme), problem occurs again. If I am using in both windows (with theme) both is ok with the theme.
Does anyone experienced similar problem?
I ran into this issue as well. Adding the following CSS fixed it.
.ui-widget-overlay {
position: fixed;
}
I solved my problem with using blockUI.
If anyone experiences similar problem here is another possible solution;
//Get The Height Of Window
var height = $(window).height();
//Change Overlay Height
$(".jquery-ui-dialog-overlay-element").css('height',height);
If you experience width related problems, you could do the same with adding var width = $(window).width(); variable to your page and changing overlay's width with .css()
Does anyone experienced similar problem?
I have and I added the following to my CSS. It puts the scroll bar on the page all the time in an inactive state when not needed. It prevents the page from appearing to "jump" when something is added to the page that activates the scrollbar.
html {overflow-y: scroll;}
Not sure if it works with your theme but worth a try.
加载中,请稍侯......
精彩评论