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

  $(document).ready(function () {
    $(".openDialog").live("click", function (e) {
      e.preventDefault();

      $("<div></div>").addClass("dialog").attr("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({
        title: $(this).attr("data-dialog-title"),
        minWidth: 500,
        minHeight: 100,
        resizable: false,

        close: function () {
          $(this).remove()
        },

        modal: true
      }).load(this.href);
    });

    $(".close").live("click", function (e) {
      e.preventDefault();
      $(this).closest(".dialog").dialog("close");
    });

    $(".refresh").live("click", function (e) {
      e.preventDefault();
      location.reload();
    });
  });
</script>

上記のjqueryを使用してダイアログボックスを取得しています。しかし、ダイアログボックスが表示されると、ウィンドウのランダムな部分に表示され、非常に不快です。ウィンドウの中央にダイアログボックスを表示させたい。ウィンドウの中央にダイアログボックスを表示するにはどうすればよいですか？

4

3 に答える 3

2

やってみました

 $(".dialog").dialog('option', 'position', 'center');

また

.dialog({
         title: $(this).attr("data-dialog-title"),
         minWidth: 500,
         minHeight: 100,
         resizable: false,                      
         close: function () { $(this).remove() },
         position:'center',
         modal: true
       })
于 2012-08-31T05:14:30.387 に答える
1

この CSS をダイアログ ボックスに使用してみてください。

​.dialog {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left: -100px; /* -width/2 */
    top: 50%;
    margin-top: -100px; /* -height/2 */
    background-color: red;
}​

そして、私はこのJSを提案します：

 $.ajaxSetup({ cache: false });

 $(document).ready(function () {
     $(".openDialog").on("click", function (e) {
         e.preventDefault();

         $("<div/>",{
             class: "dialog",
             id: $(this).attr("data-dialog-id")
         }).appendTo("body");
         .dialog({
            title: $(this).attr("data-dialog-title"),
            minWidth: 500,
            minHeight: 100,
            resizable: false,                      
            close: function () { $(this).remove() },
            modal: true
         })
         .load(this.href);
     });

     $(".close").live("click", function (e) {
         e.preventDefault();
         //$(this).closest(".dialog").dialog("close");
     });

     $(".refresh").live("click", function (e) {
         e.preventDefault();
         location.reload();
     });
 }); ​

デモ: http://jsfiddle.net/MFPpw/

于 2012-08-31T05:23:56.343 に答える
1

jQueryUIダイアログのドキュメントから：

位置

String, Array Default:
"center"

ダイアログを表示する場所を指定します。可能な値:

1) ビューポート内の位置を表す単一の文字列: 'center'、'left'、'right'、'top'、'bottom'。

2) ビューポートの左上隅からのピクセル オフセットの x、y 座標ペアを含む配列 (例: [350,100])

3) x、y 位置の文字列値を含む配列 (例: 右上隅の ['right','top'])。コード例

position オプションを指定してダイアログを初期化します。

$( ".selector" ).dialog({ position: "top" });

init 後の位置オプションを取得または設定します。

//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", "top" );

それで、正確な位置でバリアントを試しましたか？

$( ".selector" ).dialog( "option", "position", "[350, 100]" );
于 2012-08-31T05:24:48.397 に答える