我的提示对话框显示没有背景？

Question

我正在尝试做一个简单的提示。当我在jfiddle中运行它时，它运行得非常好 - 但是在我自己的计算机/站点上托管，它根本不起作用。我一定很遗憾。请看一下：

script.js：

$(document).ready(function() {
    //$('audio').mouseenter(function() {
    //  $(this).fadeOut('slow');
    //});
    function yesnodialog(button1, button2, element){
        var btns = {};
        btns[button1] = function(){ 
            $(this).dialog("close");
        };
        btns[button2] = function(){ 
            $('.level2').hide();
            $(this).dialog("close");
        };
        $("<div id='box'>Are you a <u>level 1</u>, or a <u>level 2</u> agent?</div>").dialog({
            autoOpen: true,
            title: "",
            modal:true,
            buttons:btns
        });
    }

    yesnodialog('Level 2', 'Level 1', $('.level2'));

这是在jfiddle中运行的：http://jsfiddle.net/CdwB9/421/ 它看起来对我很好

但是，在我自己的网站上，它看起来像这样：

有没有人知道为什么？

Answer 1

你的问题显然与javascript无关。它被正确加载，并且应用了带有标记，按钮和功能等的jQuery-ui魔法。

此错误的原因必须是：

1. 未加载jQuery-ui主题css文件。检查这是否已加载。如果你从官方网站下载了jQuery-ui，它应该在.zip文件夹中。
2. 您正在用自己的CSS覆盖jQuery-ui CSS。这不太可能，因为jQuery-ui标记具有非常独特的类名和相当复杂的样式（意味着您将拥有多个CSS以便能够覆盖所有这些）。

我99％肯定这是第一个建议，但你应该检查它们。

最简单的检查方法是使用Firefox和Firebug（或Chrome / Safari / Opera中的内置developpertool）并检查popup-element以查看是否有任何样式应用于标记。

PS：欢迎来到SO：）