title: jquery ui dialog, having multiple dialogs affects position
body: <p>As I am making multiple dialogs, I am faced with difficulties. Here is my code:</p>
  
  <pre><code>var dialog_count = 3;
  
  $(function() {
  
      var left_value = 0;
      var top_value = 0;
      for(var i = 1; i &lt; dialog_count+1; i++) {
          $('.dialog_' + i).dialog({ width: 263, position: [800 - left_value, 800 - top_value] });
          left_value = left_value + 40;
          top_value = top_value + 140;
      }
  });
  </code></pre>
  
  <p><strong>what it should do</strong>: neatly stack each dialog on given position</p>
  
  <p><strong>what it does</strong>: somehow re-positions each dialog as new ones gets added.</p>
  
  <p>I tried playing around with it, here's what I did, in 3 steps</p>
  
  <pre><code>$('.dialog_1').dialog({ width: 263, position: [300, 700] });
  </code></pre>
  
  <p>this is correctly positioned, now i am going to add 2nd one.</p>
  
  <pre><code>$('.dialog_1').dialog({ width: 263, position: [300, 700] });
  $('.dialog_2').dialog({ width: 263, position: [250, 550] });
  </code></pre>
  
  <p>da heck? it moved the other one by itself... now both of them are not correctly positioned.</p>
  
  <pre><code>$('.dialog_1').dialog({ width: 263, position: [300, 700] });
  $('.dialog_2').dialog({ width: 263, position: [250, 550] });
  $('.dialog_3').dialog({ width: 263, position: [200, 400] });
  </code></pre>
  
  <p>alright, now things look funky. you really have to try it yourself to understand what I am talking about... ;(</p>
  
  <p>thank you advance!</p>