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

JQuery UI Dialog is not properly resized when re-opened?

本文关键字：调整 对话框 UI 新打开 JQuery      更新时间：2023-09-26

我需要这里的专家的帮助。

我的代码很好，很漂亮，一旦点击"打开"按钮，就可以很好地运行一次。一旦我选择了日期，它就会很好地关闭。然而，当我第二次重新打开它时，宽度和高度超出了范围，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>

非常感谢和感谢您提前提供的帮助和支持。

Jay

我无法复制您描述的行为，但确实根据jQuery的建议重写了一些功能，这可能会解决您的问题。

在下面的代码块中，我在文档就绪后实例化jQuery模态对话框，然后每次启动对话框（'open'）命令来打开/关闭它。

如果这对你有效，请告诉我：）

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

我也无法重现您的问题，但如果您一直得到它，您可以使用类似$("#dd").dialog().option("height", 215)的东西。在jquery对话框高度选项中阅读更多关于它的信息-在运行时设置高度。

也许CSS解决方案会更好？

你有没有注意到你有autoOpen:true，但你没有使用它？这是故意的吗？

这是我的JSFiddle。

相关文章：