title: Populate jquery modal dialog with MVC partial view async, and show in center of screen
body: <p>I'm trying to use the jquery modal dialog to show a partial view async when clicking on something. Pretty simple, and there are loads of questions on this, but I can't seem to get it work. I have had the modal displaying, but not in the center. And I've read it's because I'm populating the div <em>after</em> the dialog is displayed, therefore the position is relative to the empty div, not the populated one - and I've proved this to be the case by showing some static content, and it centers fine.</p>
  
  <p>So now, I'm trying to get the partial view first, then show the dialog in the load() callback, but it's not working. I get an error on the 'dialog('open')' line, because the dialog method is undefined. Here's my code:</p>
  
  <p>(P.S. I'm new to javascript/jQuery, so sorry if it's pretty obvious)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(function () {
          $('#my-dialog').dialog({
              autoOpen: false,
              width: 400,
              resizable: false,
              modal: true
          });
      });
  
      $(document).ready(function() {
          $('#show-modal').click(function() {
              $('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
                  $('#my-dialog').dialog('open');
              });
  
              return false;
          });
      });
  
  &lt;/script&gt;
  
  &lt;div id="my-dialog"&gt;&lt;/div&gt;
  
  &lt;a href="#" id="show-modal"&gt;Click Me &lt;/a&gt;
  </code></pre>
  
  <p>Help appreciated!</p>
  
  <p><strong>Edit</strong> I've changed the code to match Darin's and uploaded an image showing what the problem appears to be?</p>
  
  <p><img src="https://i.stack.imgur.com/LLTNc.png" alt="wtf"></p>