Javascript JQuery UI对话框在重新打开时未正确调整大小？_Javascript_Jquery_Jquery Ui_Javascript Framework

Javascript JQuery UI对话框在重新打开时未正确调整大小？

javascript jquery jquery-ui

Javascript JQuery UI对话框在重新打开时未正确调整大小？,javascript,jquery,jquery-ui,javascript-framework,Javascript,Jquery,Jquery Ui,Javascript Framework,我需要这里专家的帮助我的代码很好，很漂亮，只要点击“打开”按钮，一次就可以很好地工作。一旦我选择了日期，它就会很好地关闭。但是，当我再次打开它时，宽度和高度超出范围，ui对话框看起来不同。我想知道我做错了什么 <html> <head>  <link href="jq/jquery-ui.css" type="text/css" rel="stylesheet

我需要这里专家的帮助

我的代码很好，很漂亮，只要点击“打开”按钮，一次就可以很好地工作。一旦我选择了日期，它就会很好地关闭。但是，当我再次打开它时，宽度和高度超出范围，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>


var z；
函数opendd（）{
$（'#dd'）。对话框（{
自动打开：对，
莫代尔：是的，
覆盖：{不透明度：0.5，背景：“黑色”}，
标题：“选择日期：”，
身高：215，
宽度：234，
可拖动：错误，
可调整大小：false
})；//对话框结束
$（“#B1”）。单击（函数（）{
回调（）；
}); 
$（'#d1'）。日期选择器（{
onSelect:function（）{
z=$（this.val（）；
警报（z）；
$（“#dd”）。对话框（“关闭”）；
} 
}); 
}//功能结束
函数回调（）{
警报（z）；
}

非常感谢并感谢您的帮助和支持

Jay

我无法复制您描述的行为，但确实重写了一些功能，使其更准确地符合jQuery的建议，这可能会解决您的问题

在下面的代码块中，我在文档就绪时实例化jQuery模式对话框，然后每次启动dialog（'open'）命令来打开/关闭它。（我用谷歌api替换了你的库进行测试）

请让我知道这是否适合您：）


var z；
$（文档）.ready（函数（）{
$（'#dd'）。对话框（{
自动打开：错误，
莫代尔：是的，
覆盖：{不透明度：0.5，背景：“黑色”}，
标题：“选择日期：”，
身高：215，
宽度：234，
可拖动：错误，
可调整大小：false
})；//对话框结束
$（“#B1”）。单击（函数（）{
回调（）；
}); 
$（'#d1'）。日期选择器（{
onSelect:function（）{
z=$（this.val（）；
警报（z）；
$（“#dd”）。对话框（“关闭”）；
} 
}); 
});
函数opendd（）{
$（'dd'）。对话框（'open'）；
}//功能结束
函数回调（）{
警报（z）；
}

我也无法重现您的问题，但如果您继续得到它，您可以使用类似

$（“#dd”）.dialog（）选项（“高度”，215）

。阅读更多关于它的信息

也许CSS解决方案会更好

您是否注意到您有

autoOpen:true

，但您没有使用它？这是故意的吗

这是

您是否尝试将“自动”用于高度和宽度这里看起来很稳定（虽然很拥挤），眼睛的宽度变了：）谢谢大家的帮助。你们都很摇滚。就我而言，我想是愚蠢和疏忽，我忘了申报，一切正常。我还下载了jQuery 1.7.2，而不是1.8。

<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>