title: How to change size of modal dialog dynamically?
body: <p>I have a modal dialog in main page, then I add jPlayer to this dialog. All works fine, but I see only part of player in this dialog. How to change dialog size to the player size after the player is inserted?</p>
  
  <p>i.e. I want to insert audio or video player to this dialog and they have different sizes. </p>
  
  <pre><code>$(document).ready(function(){
  
      $("#jquery_jplayer_1").jPlayer({
          ready: function () {
              $(this).jPlayer("setMedia", {
                  mp3: "media/track.mp3",
              }).jPlayer("play"); // auto play
          },
          ended: function (event) {
              $(this).jPlayer("play");
          },
          swfPath: "swf",
          supplied: "mp3"
      })
      .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
              $(this).jPlayer("pauseOthers");
      });
    });
  
  
   &lt;script type="text/javascript"&gt;
  
          $.ajaxSetup({ cache: false });
  
          $(document).ready(function () {
              $(".openDialog").live("click", function (e) {
                  e.preventDefault();
  
                  $("&lt;div&gt;&lt;/div&gt;")
                      .addClass("dialog")
                      .attr("id", $(this)
                      .attr("data-dialog-id"))
                      .appendTo("body")
                      .dialog({
                          title: $(this).attr("data-dialog-title"),
                          close: function () { $(this).remove() },
                          modal: true
                      })
                      .load(this.href);
              });
  
              $(".close").live("click", function (e) {
                  e.preventDefault();
                  $(this).closest(".dialog").dialog("close");
              });
          });
      &lt;/script&gt;
  </code></pre>