Databases
StackOverflow2013
Postsdbo
POcentering Modal Window with different width and height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcentering Modal Window with different width and height
    text
    copied!<p>I'm new in jquery and sorry if there's duplication of topic, but seriously I really have no idea on how to centering my Modal Window. On the Modal Window, I will display an image, <strong>each image have their own width and height</strong>, whenever i click view for the first time the Modal Window display is not centering, but when I click for the second time, the modal Window display at center. just wonder why only at second click it will display at center.</p> <p>Image height and width is retrieve from php coding and passed to hidden value <code>imgheight</code> and <code>imgwidth</code>. </p> <p>Here my jquery</p> <pre><code>//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") }); }); }); </code></pre> <p>Here the HTML</p> <pre><code>&lt;div id="dialog-form-img"&gt; &lt;section&gt; &lt;form method="post" action="#" id="modal"&gt; &lt;fieldset class="reply"&gt;&lt;h1 id="nameimg"&gt;&lt;/h1&gt; &lt;div class="parent"&gt; &lt;div class="panzoom"&gt;&lt;span id="disimg"&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;br/&gt; &lt;div class="buttons"&gt; &lt;span style='float:right' id='button'&gt; &lt;span id="dload" class="button_form" style="cursor:pointer;"&gt;Download&lt;/span&gt; &lt;span id="cancel" class="button_form" style="cursor:pointer;"&gt;Cancel&lt;/span&gt; &lt;/span&gt; &lt;input type="range" class="zoom-range"&gt; &lt;!--&lt;button class="reset"&gt;Reset&lt;/button&gt;--&gt; &lt;/div&gt; &lt;input type="hidden" name="imgid" id="imgid" /&gt; &lt;input type="hidden" name="imgheight" id="imgheight" /&gt; &lt;input type="hidden" name="imgwidth" id="imgwidth" /&gt; &lt;script&gt; (function() { var $section = $('section').first(); $section.find('.panzoom').panzoom({ $zoomRange: $section.find(".zoom-range"), $reset: $section.find(".reset") }); })(); &lt;/script&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/section&gt; &lt;/div&gt; </code></pre> <p>Thanks for helping</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload