重新打开时 JQuery UI 对话框没有正确调整大小？
Posted
技术标签:
【中文标题】重新打开时 JQuery UI 对话框没有正确调整大小？【英文标题】：JQuery UI Dialog is not properly resized when re-opened? 【发布时间】：2012-08-24 12:41:50 【问题描述】：我需要这里的专家的帮助。
单击“打开”按钮后，我的代码很好，很漂亮，一次就可以很好地工作。一旦我选择了日期，它就关闭了。但是，当我再次重新打开它时，宽度和高度超出了范围，并且 ui 对话框看起来不同。我想知道我在这里做错了什么？
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var z;
function opendd()
$('#dd').dialog(
autoOpen: true,
modal: true,
overlay: opacity: 0.5, background: 'black',
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
);//end of dialog_atip
$("#B1").click(function()
callback();
);
$('#d1').datepicker(
onSelect:function()
z = $(this).val();
alert(z);
$("#dd").dialog("close");
);
//end of function
function callback()
alert(z);
</script>
</head>
<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<input type="button" value="CallbackValue" name="B1" id="B1">
</body>
</html>
非常感谢您提前提供的所有帮助和支持。
杰
【问题讨论】：
您是否尝试过使用“auto”作为高度和宽度？ ：***.com/questions/2231446/… 这里看起来一致（尽管很拥挤）jsfiddle.net/j08691/T8EcP 这里，改变了眼睛的宽度 :) jsfiddle.net/awPGV 感谢大家的帮助。你们都摇滚。我猜是我的愚蠢和忽视，我忘记声明 并且一切都正常工作。我还下载了 jQuery 1.7.2 而不是 1.8。 【参考方案1】：我无法复制您描述的行为，但确实重写了一些功能以更准确地符合 jQuery 的建议，这可能会解决您的问题。
在下面的代码块中，我在文档准备好时实例化 jQuery 模态对话框一次，然后每次触发 dialog('open') 命令以打开/关闭它。 （我用 google api 替换了你的库进行测试）。
如果这对你有用，请告诉我:)
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
var z;
$(document).ready(function()
$('#dd').dialog(
autoOpen: false,
modal: true,
overlay: opacity: 0.5, background: 'black',
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
);//end of dialog_atip
$("#B1").click(function()
callback();
);
$('#d1').datepicker(
onSelect:function()
z = $(this).val();
alert(z);
$("#dd").dialog("close");
);
);
function opendd()
$('#dd').dialog('open');
//end of function
function callback()
alert(z);
</script>
</head>
<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<input type="button" value="CallbackValue" name="B1" id="B1">
</body>
</html>
【讨论】：
【参考方案2】：我也无法重现您的问题，但如果您继续遇到问题，您可以使用$("#dd").dialog().option("height", 215) 之类的东西。在jquery dialog height option - setting height in runtime 上阅读更多相关信息。
也许 CSS 解决方案会更好？
您是否注意到您有 autoOpen:true 但您不使用它？这是故意的吗？
这里是my JSFiddle。
【讨论】：
以上是关于重新打开时 JQuery UI 对话框没有正确调整大小？的主要内容，如果未能解决你的问题，请参考以下文章