dialog close button only appears on hover

dialog close button only appears on hover

I'm using version 1.8.6, with the "Lightness" theme, which I have not modified. I put a dialog on the page, and the close button ("X" in the upper right hand corner, in the title bar) does not show up. If I hover over the spot where it should be, I get a white square, which does close the dialog when I click it. The dialog is displaying exactly as desired otherwise. Is there something I need to do to have this always show up? Or am I not using the dialog correctly? 

Below is the code I'm using to populate and place the dialog (the lines where I actually place the dialog are highlighted:

  2. $(".masterDetailGrid > tbody > tr:not(:has(table, th))")
  3.     .css("cursor", "pointer")
  4.     .click(function(event)
  5.     {
  6.         //debugger;
  7.         var $row = $(this);
  8.         var firstParam = $("td", $row).eq(0).text();
  9.         $.ajax(
  10.         {
  11.             type: "POST",
  12.             url: "GetPromotionCodeDetails.ashx?code=" + firstParam,
  13.             //dataType: "text/html",
  14.             async: true,
  15.             cache: false,
  16.             success: function(msg)
  17.             {
  18.                 //debugger;
  19.                 var details = msg;
  20.                 if (details.length > 0)
  21.                 {
  22.                     Display(details);
  23.                 }
  24.                 else
  25.                 {
  26.                     $("detailsDisplay").text("No Data Found");
  27.                 }
  28.                 $("#dialog").dialog({ width: 400, modal: true });
  29.                 $("#dialog").dialog('open');
  30.             },
  31.             error: function(XMLHttpRequest, textStatus, errorThrown)
  32.             {
  33.                 alert(textStatus);
  34.             }
  35.         });
  36.     });