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;，看看你是否需要它。