jqueryのUIダイアログは常に左上隅に表示されます

Question

この質問はこのフォーラムで数回質問されましたが、私はそこにすべての提案を試みましたが、これまでのところ何も動作していません。

MVCアプリケーションでは、ユーザーがクリックするリンクの近くに表示されるjquery UIダイアログがあります。だから私は次のビューを持っています：

div class="row"> 
    <div class="col-md-4"> 
     <h2>Link for popup</h2> 
     <p> 
      @Ajax.ActionLink("Update Status", "UpdateStatus", "Home", 
         new AjaxOptions 
          { 
           HttpMethod = "GET", 
           UpdateTargetId = "rolesPopUp", 
           InsertionMode = InsertionMode.Replace, 
           OnSuccess = "openSuccess" 
          }) 
     </p> 
    </div> 
    <div class="col-md-4"> 
     <h2>See this being updated</h2> 
     <p id="rolesPopUp">Col 2</p>   
    </div> 
    <div class="col-md-4 popupBase"> 
     <h2>Web Hosting</h2> 
     <p id="successUpdate">Col 3</p> 
    </div> 
</div> 

これは、ダイアログをテストする唯一の目的で作成されています。基本的には、Visual Studio 2013でMVCアプリケーションを作成し、最新のjqueryに更新し、jquery UIをインストールしました。私はそれが動作するかどうかを確認するdatepickerを入れます。私は、ページの下部に次のスクリプトを持っていません。どんなに私は何をすべきか

<script src="/Scripts/jquery-3.0.0.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery-ui-1.11.4.js"></script> 
<script src="/Scripts/bootstrap.js"></script> 
<script src="/Scripts/respond.js"></script> 



<script type="text/javascript"> 
    $.ajaxSetup({ cache: false }); 

    $(function() { 
     // Activate datepicker ui. It is not shown in the view file to keep the code short. 
     $(".myDatePicker").datepicker();  
     $("#successUpdate").text("Waiting!"); 
     $("#rolesPopUp").dialog({ 
      autoOpen: false, 
      position: { my: "center", at: "center", of: ".popupBase", collision: "none" } 
     }); 
    }); 

    // openPopup function 
    function openSuccess() { 
     $("#successUpdate").text("Success!"); 
     $("#rolesPopUp").dialog("open");    
    } 

</script> 

、ダイアログが常に画面の左上隅に表示されます。私は多くの異なる位置（画面の中心/ウィンドウ/要素、右、左など）を試して、この問題に関するいくつかの記事を読んで、衝突を追加して削除しました。位置が変わる場所を調べるためにFirebugでコードをデバッグしようとしました。 jqueryの知識が限られているため、どこに上書きされているのかわかりませんでした。実際、私はコード内でコードの位置の変化を示唆する何も表示されません。私はこれに5日間を費やしています。私は解決策の近くに方法を得ていません。私は助けてください。

Answer 1

これは非常に簡単でした。私はjQuery 3.1.0を使用していました。 jQuery 1.10.2へのダウングレードが機能しました。私はjqueryの他のバージョンを試していません。私はjquery UIのダイアログhttp://api.jqueryui.com/dialog/の公式ウェブサイトで使用されているので、jquery 1.10.2を使用しました。

私は、ダイアログにスタイルの下に持っているのjQuery UI 1.8.7を使用していた

Answer 2

：へ

.css({ top: 0, left: 0 }) 
.position($.extend({of: window }, position)); 

：

.css({ top: 0, left: 0 }) 

私からそれを更新

//.css({ top: '170px', left: '650px' }) 
.position($.extend({ my: "center", at: "center", of: window }, position));