jQuery对话框显示未修饰

Question

我的jQuery回调正确触发，但对话框看起来完全裸露（见图片）。这是我的javascript：

$(".info").click(function(event){
    event.preventDefault();
    $id = $(this).attr("id");
    $.ajax({
           type: "POST",
           url: 'my_code.php',
           data: {query:"info", rowid: $id},
           success: function(data) {
                try {
                   obj = JSON.parse(data);
                   var str = '';
                   for (var i in obj) {
                       str += i + ":" + obj[i] + "<br />";
                   }
                   $("#dialog-1").html(str).dialog({modal: true}).dialog('open');
                } catch (e) {}
           }
        });
});

我的HTML只是

<div id="dialog-1" title="Rule Information" style="display:none"></div>

但你可以看到我糟糕的对话看起来很破旧！我知道我可以用css装扮它但是它​​是什么导致它看起来这样？

Answer 1

正如您所见 here jQuery UI附带了一个javascript文件和一个css文件。如果未使用css文件，组件将看起来是破旧的。

没有CSS的jQuery UI

＆＃13;

＆＃13;

function fnOpenNormalDialog() {
  $("#dialog-confirm").html("Confirm Dialog Box");

  $("#dialog-confirm").dialog({
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        callback(true);
      },
      "No": function() {
        $(this).dialog('close');
        callback(false);
      }
    }
  });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
  if (value) {
    alert("Confirmed");
  } else {
    alert("Rejected");
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm" style="display:none"></div>

＆＃13;

＆＃13;

＆＃13;

带CSS的jQuery UI

＆＃13;

＆＃13;

function fnOpenNormalDialog() {
  $("#dialog-confirm").html("Confirm Dialog Box");

  $("#dialog-confirm").dialog({
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        callback(true);
      },
      "No": function() {
        $(this).dialog('close');
        callback(false);
      }
    }
  });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
  if (value) {
    alert("Confirmed");
  } else {
    alert("Rejected");
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm" style="display:none"></div>

＆＃13;

＆＃13;

＆＃13;