title: JQuery Modal dialog: Overlay is not visible
body: <p>I am new to JQuery. I am developing a ASP.Net MVC application. In one of the views I am trying to open a JQuery Modal Dialog.
  Here is the JavaScript code for this</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript" /&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript" /&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"/&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"/&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"/&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () 
      {
          $(".openDialogLink").
          live("click", function (e) 
          {
              e.preventDefault();
              $("&lt;div&gt;&lt;/div&gt;").addClass("dialogBoxDiv").appendTo("body").
              dialog(
              {
                  modal: true, 
                  draggable: true,
                  overlay: { backgroundColor: "#000000", opacity: 0.5 }, 
                  title: $(this).attr("DialogTitle"),
                  show: "puff",
                  hide: "puff",
                  closeOnEscape: true,
                  close: function () 
                  {
                      $(this).remove()
                  },
              }
              ).load(this.href);
          });
          $(".close").
          live("click", function (e) 
          {
              e.preventDefault();
              $(this).closest(".dialog").dialog("close");
          });
      }); 
  </code></pre>
  
  <p></p>
  
  <p>Problem is the overlay for unused area in webpage is not visible. Looks like there is some small setting I am missing.</p>
  
  <p>Help Please.</p>