以不同宽度和高度为中心的模态窗口

Question

我是jquery的新手，对不起，如果有重复的主题，但我真的不知道如何集中我的模态窗口。在模态窗口，我将显示一个图像，每个图像都有自己的宽度和高度，每当我第一次单击视图时，模态窗口显示不居中，但是当我点击第二个时时间，模态窗口显示在中心。只是想知道为什么只有在第二次点击它才会显示在中心。

图像高度和宽度从php编码中检索并传递给隐藏值imgheight 和imgwidth。

这是我的jquery

//Modal Window image preview
$(function() {

$( "#dialog-form-img" ).dialog({
  autoOpen: false,
  resizable: false,
  modal: true,
  width:'auto',
  height:'auto',
  open: function display_img() {
    var imgname = $('#imgid').val();
    var imgheight = $('#imgheight').val();
    var imgwidth = $('#imgwidth').val();
    var url = document.URL;
    var split = url.split("todo");
    var src = split[0]+"todo/upload/"+imgname;
    show_image(src, imgname, imgheight, imgwidth);

  }
});

$( '#dload')
  .click(function() {
    var imgid = $('#imgid').val();
    window.location = 'get_file.php?id='+encodeURI(imgid);      
});

$( '#cancel')
  .click(function() {
    $( "#dialog-form-img" ).dialog( "close" );
    $("html,body").css("overflow","auto");
});
}); 

function show_image(src, alt, h, w) {
var img = document.createElement("img");
img.src = src;
img.width = w;
img.height = h;
img.alt = alt;
$('#disimg').html(img);
}  

//when click magnifier (image) display modal window
 (document).ready(function(e) {
$("img[id^='msgimg']").click(function() {
    var attachname = $(this).data('attachname');
    var realname = $(this).data('realname');
    var height = $(this).data('height');
    var width = $(this).data('width');
    $('#nameimg').html(realname);
    $('#imgid').val(attachname);
    $('#imgheight').val(height);
    $('#imgwidth').val(width);
    $( "#dialog-form-img" ).dialog( "open" );
    //window.scrollTo(200,curr);        
    $("html,body").css("overflow","hidden");
    $section.find('.panzoom').panzoom({
        $reset: $section.find(".reset")
    });         
});
});

这里的HTML

<div id="dialog-form-img">
<section>
  <form method="post" action="#" id="modal">
  <fieldset class="reply"><h1 id="nameimg"></h1>
    <div class="parent">
       <div class="panzoom"><span id="disimg"></span></div>
    </div>
  <br/>
  <div class="buttons">
  <span style='float:right' id='button'>
    <span id="dload" class="button_form" style="cursor:pointer;">Download</span>
    <span id="cancel" class="button_form" style="cursor:pointer;">Cancel</span>
  </span>
    <input type="range" class="zoom-range">
    <!--<button class="reset">Reset</button>-->
  </div>
  <input type="hidden" name="imgid" id="imgid" />
  <input type="hidden" name="imgheight" id="imgheight" />
  <input type="hidden" name="imgwidth" id="imgwidth" />
  <script>
    (function() {
      var $section = $('section').first();
      $section.find('.panzoom').panzoom({
        $zoomRange: $section.find(".zoom-range"),
        $reset: $section.find(".reset")
      });
    })();
  </script>
 </fieldset>
</form>
</section>
</div>

感谢您的帮助