Jquery 对话框确认框问题

Question

过去几天我一直在搜索 Stack & Web 文章，看看是否能找到自己的答案。是时候咨询专家了。

代码 HTML

<div id="dialog-confirm" title="Are You Sure?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This cannot be changed later!</p>
</div>

代码 Jquery

$(".myclass").click(function() {
    var id = $(this).attr("id");
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            'Choose This?': function() {

                var dataString = 'id='+ id ;

                $.ajax({
                    type: "POST",
                    url: "runAjax.php",
                    data: dataString,
                    cache: false,

                    success: function() {
                        $("#dialog-confirm").dialog('close');
                        window.location.reload(true);
                    }
                });                                
            },

            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });

return false;
});

我正在使用的 Jquery 对话框确认框在每一种方式中都能完美运行，除了，下面显示的对话框的段落段不会出现在对话框中。

p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This cannot be changed later. Are you sure?</p>

我确实在标题中包含 jquery.js、jquery-ui.js。 core.js 运行在页面的页脚中，该页面具有上面的 jquery 函数以及用于 Tipsy.js 的函数以及其他一些 ajax 事件。有人看到我明显看不到的吗？

编辑： 试图将它添加到 jsFiddle 导致我看到我的 CSS 有点封闭，果然

#dialog-confirm { visbility: hidden;}

这就是我看不到对话框内容的原因。但是，我在几周前最初安装此功能时将其放在那里，因为段落内容不应该显示在页面上。有没有人偶然知道为什么它可能会显示在页面中？当对话框确认框打开时，它会从页面上消失。

编辑 2：

#dialog-confirm { display: none; }

哎呀....

Answer 1

它确实出现在对话框中，但是您的对话框高度设置得太小以至于您看不到它（如果您滚动可以看到它）。这有效（注意增加了对话框高度）：

<a href="#" class="myclass">CLICK HERE</span>
<div id="dialog-confirm" title="Are You Sure?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This cannot be changed later!</p>
</div>

$(".myclass").click(function() {
    var id = $(this).attr("id");
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 300,
        modal: true,
        buttons: {
            'Choose This?': function() {

                var dataString = 'id='+ id ;

                $.ajax({
                    type: "POST",
                    url: "runAjax.php",
                    data: dataString,
                    cache: false,

                    success: function() {
                        $("#dialog-confirm").dialog('close');
                        window.location.reload(true);
                    }
                });                                
            },

            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });

return false;
});

小提琴：http://jsfiddle.net/ppuuM/