jQuery UI对话框内容显示在按钮部分

Question

我一直在使用jQuery对话框一段时间，而现在遇到的问题有点奇怪。

jQuery的版本：1.7.1 jQuery UI的版本：1.8.18

<!-- Generic Dialog Box --> 
<div id="dialog" style="display:none;position:absolute;"></div> 

jQuery代码：

$('.class_to_find').each(function(){ 
    //$('#dialog').append($(this).css({position:"absolute"})); 
    $('#dialog').append("<p>Adding a line.</p>"); 
}); 
$('#dialog').dialog({ 
    //autoOpen: true, 
    show: "explode", 
    hide: "explode", 
    modal: true, 
    title: "Jobs", 
    buttons: { 
     Done: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function(){} 
}); 
$('#dialog').dialog('open'); 

当对话框打开，内容下方显示出来内容通常显示出来。它显示在按钮窗格中。这是个问题。我无法弄清楚它为什么这样做。有谁知道为什么？

这里是一个的jsfiddle暴露的问题：http://jsfiddle.net/8Lj8m/1/

谢谢！

Answer 1

删除对话框div样式属性position:absolute;并查看是否您需要。