Question

<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来获取对话框。但是当显示对话框时，它出现在窗口的随机部分，非常不舒服。我想让对话框出现在窗口的中心。如何在窗口中央显示对话框？

Answer 1

你试过吗

 $(".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
       })

Answer 2

尝试使用此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/

Answer 3

来自jQueryUI dialog documentation：

位置
String, Array Default:
"center"
指定对话框的显示位置。可能的值：

1）a   表示视口内位置的单个字符串：'center'，'left'，   '正确'，'顶部'，'底部'。

2）包含x，y坐标的数组   从视口左上角的像素偏移对（例如，   [350100]）

3）包含x，y位置字符串值的数组（例如，   右上角的['右'，'顶''）。代码示例

使用指定的位置选项初始化对话框。
$( ".selector" ).dialog({ position: "top" });
在初始化后获取或设置位置选项。
//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", "top" );

那么您是否尝试过具有确切位置的变体？

$( ".selector" ).dialog( "option", "position", "[350, 100]" );

在jquery中调整对话框的位置

3 个答案: