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']）。代码示例

使用指定的位置选项初始化对话框。

$( ".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 回答