无法动态定位Jquery对话框窗口

Question

我有以下代码

＆＃13;

＆＃13;

$(function(){
    $('.dialog').dialog({
        autoOpen: false,
        modal: false,
        width: "auto",
        height: "auto"
   });

    $('button').each(function(i) {
        var el = $(this);
       el.click(function () {
            $('.dialog').eq(i).dialog('open');
        });
    });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>


<button id="opener_1">Enlarge</button>
<div class="dialog" title="Dialog Title">Enlarge 1
  <img class="large_1" src="./large1.jpg" style="display:none" />
</div>

 <button id="opener_2">Enlarge</button>
 <div class="dialog" title="Dialog Title">Enlarge 2
  <img class="large_2" src="./large2.jpg" style="display:none" />
</div>

 <button id="opener_3">Enlarge</button>
 <div class="dialog" title="Dialog Title">Enlarge 3
  <img class="large_3" src="./large3.jpg" style="display:none" />
</div>

＆＃13;

＆＃13;

＆＃13;

现在每个对话框窗口都显示在每个窗口的顶部。我试图让它分开，但我失败了。我试过＆＃34;位置＆＃34;但无法达到效果。