Làm cách nào để tự động căn giữa hộp thoại jQuery UI khi thay đổi kích thước trình duyệt?

Khi bạn sử dụng hộp thoại jquery UI, tất cả đều hoạt động tốt, ngoại trừ một thứ. Khi trình duyệt được thay đổi kích thước, hộp thoại vẫn ở vị trí ban đầu, điều này có thể thực sự gây khó chịu.

Bạn có thể kiểm tra nó trên: http://jqueryui.com/demos/dialog/

Nhấp vào ví dụ "hộp thoại phương thức" và thay đổi kích thước trình duyệt của bạn.

Tôi muốn có thể để hộp thoại tự động căn giữa khi trình duyệt thay đổi kích thước. Điều này có thể được thực hiện một cách hiệu quả cho tất cả các hộp thoại trong ứng dụng của tôi không?

Cảm ơn rất nhiều!

Đặt positiontùy chọn sẽ buộc điều này, vì vậy chỉ cần sử dụng cùng một bộ chọn bao gồm tất cả các hộp thoại của bạn mà tôi sử dụng #dialogở đây (nếu không tìm thấy chúng thì không có hành động nào được thực hiện, như tất cả jQuery):

jQuery UI trước 1.10

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

jQuery UI 1.10 trở lên

$(window).resize(function() {
    $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});

Đây là trang demo giao diện người dùng jQuery tương tự chỉ thêm đoạn mã ở trên , chúng tôi chỉ thêm một trình xử lý vào resizesự kiện của cửa sổ với .resize(), vì vậy nó sẽ kích hoạt căn giữa lại vào thời điểm thích hợp. Các bác sĩ cho biết:

Ngoài câu trả lời của Ellesedil,

Giải pháp đó không hiệu quả với tôi ngay lập tức, Vì vậy, tôi đã làm như sau, cũng là phiên bản động nhưng rút gọn:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

+1 cho Ellesedil mặc dù

BIÊN TẬP:

Phiên bản ngắn hơn nhiều hoạt động tốt cho các hộp thoại đơn lẻ:

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

Không nhất thiết phải sử dụng .each () nếu bạn có một số hộp thoại duy nhất mà bạn không muốn chạm vào.

Bạn có thể tìm thấy câu trả lời toàn diện hơn, sử dụng câu trả lời của Nick theo cách linh hoạt hơn tại đây .

Dưới đây là một sự điều chỉnh của mã liên quan từ chuỗi đó. Phần mở rộng này về cơ bản tạo ra một cài đặt hộp thoại mới có tên là autoReposition chấp nhận giá trị true hoặc false. Mã như được viết mặc định tùy chọn là true. Đặt nó vào tệp .js trong dự án của bạn để các trang của bạn có thể tận dụng nó.

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

Điều này cho phép bạn cung cấp "true" hoặc "false" cho cài đặt mới này khi bạn tạo hộp thoại trên trang của mình.

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

Bây giờ hộp thoại này sẽ luôn tự định vị lại. AutoReposition (hoặc bất kỳ thứ gì bạn gọi là cài đặt) có thể xử lý bất kỳ hộp thoại nào không có vị trí mặc định và tự động định vị lại chúng khi cửa sổ thay đổi kích thước. Vì bạn đang thiết lập điều này khi tạo hộp thoại, bạn không cần phải xác định hộp thoại bằng cách nào đó vì chức năng định vị lại được tích hợp sẵn trong hộp thoại. Và phần tốt nhất là vì điều này được đặt cho mỗi hộp thoại, bạn có thể có một số hộp thoại tự định vị lại và những hộp thoại khác vẫn ở nguyên vị trí của chúng.

Tín dụng cho người dùng scott.gonzalez trên diễn đàn jQuery cho giải pháp hoàn chỉnh.

Một tùy chọn chỉ CSS khác hoạt động là tùy chọn này. Các lề âm phải bằng một nửa chiều cao và một nửa chiều rộng của bạn. Vì vậy, trong trường hợp này, hộp thoại của tôi có chiều rộng 720px x chiều cao 400px. Điều này căn giữa nó theo chiều dọc và chiều ngang.

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Ngoài ra, có thể sử dụng vị trí ui jQuery ,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

Xin chào tất cả mọi người!

Giải pháp Vanilla JS:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());