title: ASP.NET MVC JQuery Modal Dialog content looks empty
body: <p>I am trying to use jQuery to show a modal dialog box on the page when the user clicks a button.  This is something I've never done before.  It looks like everything works fine, except that I can't see the content on the dialog and I can't figure out why.</p>
  
  <p>This is the modal div within the view:</p>
  
  <pre><code>&lt;div class="modal fade" id="activeStatusModal" tabindex="-1" role="dialog" aria-labelledby="activeStatusModalLabel"&gt;
      &lt;h3 id="jobstatusactionh3" style="color:black"&gt;&lt;/h3&gt;
      &lt;p id="jobstatusactiontext" style="color:black"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the jQuery in the scripts section pertaining to that:</p>
  
  <pre><code>$(document).ready(function () {
      $("#activeStatusModal").dialog({
          autoOpen: false,
          title: 'Job Status',
          modal: true
      });
  });
  
  $("a.btn").click(function (event) {
      //Prevent navigation to the jobs page.
      event.stopPropagation();
  
      var toggle = $(this);
      var ids = toggle.attr("id").split("-");
      var cid = ids[1]; //Customer ID
      var job = ids[2]; //Job ID
  
      if (toggle.val() == "Mark Inactive") {
          $("#jobstatusactionh3").text("Job " + job + " is currently ACTIVE.");
          $("#jobstatusactiontext").text("You can mark it as inactive by clicking Confirm. Marking a job inactive helps us know that you're done. You can always reactivate it.");
      } else {
          $("#jobstatusactionh3").text("Job " + job + " is currently INACTIVE.");
          $("#jobstatusactiontext").text("You can reactivate it by clicking Confirm.");
      }
  
      $("#activeStatusModal").dialog({
          buttons:
          {
              'Confirm': function () {
                  $.ajax({
                      url: "/Jobs/ToggleActive",
                      method: "POST",
                      data: { cid: cid, job: job },
                      dataType: "json",
                      success: function (data, status, jqxhr) {
  
                      }
                  });
                  $(this).dialog('close');
                  location.reload(true);
              },
              'Cancel': function () {
                  $(this).dialog('close');
              }
          }
      });
  
      $("#activeStatusModal").dialog("open");
  });
  }  //end toggle active/inactive
  </code></pre>
  
  <p>When I run it locally and inspect the page, this is what I see (notice the text having been set accordingly):</p>
  
  <p><a href="https://i.stack.imgur.com/nCbTg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nCbTg.png" alt="Modal1"></a></p>
  
  <p><a href="https://i.stack.imgur.com/2SUOf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2SUOf.png" alt="Modal2"></a></p>
  
  <p><a href="https://i.stack.imgur.com/CVnTA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CVnTA.png" alt="Modal3"></a></p>
  
  <p>Why does it look empty?</p>