title: Why is my jQuery popup box not "modal"?
body: <p>I have this javascript:</p>
  
  <pre><code>&lt;script src="Scripts/jquery-3.0.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="Scripts/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      //Total out of range dialog
      var opt = {
          autoOpen: false,
          modal: true,
          width: 550,
          height: 650,
          buttons: { 'OK': function () { $(this).dialog('close'); } },
          title: 'This is a test'
      };
  
      function ShowRangeDialog() {
          $(function () {
              $('#rangeDialog').dialog(opt).dialog("open");
          });
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>I have this div located inside a tab container:</p>
  
  <pre><code>&lt;div id="rangeDialog" style="display: none;" title="Total out of range"&gt;
    &lt;p&gt;
      Your line items total is out of the range allowed by the approval level you chose.
      Please check the approval range and adjust the line items or quantities.
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have this code-behind:</p>
  
  <pre><code>StringBuilder sb = new StringBuilder();
  sb.Append("ShowRangeDialog();");
  ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "key", sb.ToString(), true);  
  </code></pre>
  
  <p>When I run this, the "popup" displays as appended text to the bottom of the page.  When I click the 'OK' button it hides.  So, it's like it's working but it's not actually displaying as a popup like it should.</p>
  
  <p>Any ideas?</p>