jQuery - Hộp thoại tự động thay đổi kích thước trên nội dung động và duy trì vị trí trung tâm

Question

Tôi có hộp thoại jQuery và đang tải nội dung bằng Ajax.

Hộp thoại ban đầu ở giữa trang. Vấn đề, đây là, Vì nó là một nội dung động, kích thước của dữ liệu chưa được biết. Vì vậy, khi tôi nhận được dữ liệu lớn, hộp thoại chỉ phát triển ở phía dưới cùng, tức là Hộp thoại mở rộng ở dưới cùng và phía trên vẫn ở cùng vị trí.

Những gì tôi muốn là

Khi dữ liệu được nạp, hộp thoại sẽ mở rộng ở cả hai hướng (trên và dưới), vì vậy mà nội dung là có thể nhìn thấy mà không cần cuộn.

Answer 1

Hộp thoại mặc định là vị trí tương đối hoàn toàn.

Hộp thoại có thể mở rộng khi đặt chiều cao tự động, nhưng khi trang được cuộn, hộp thoại sẽ tự định vị lại.

Cách duy nhất để làm điều này là, áp dụng những phong cách vào hộp thoại

1. Chức hộp thoại trong cửa sổ bởi

   position : ['center',<distance from top>]

2. Fix vị trí bằng cách sử dụng css phong cách

   .fixed-dialog { position:"fixed" }

3. Thêm lớp này đến hộp thoại

   dialogClass : 'fixed-dialog'

Vì vậy, hộp thoại sẽ trông như thế

$('#dialog-div').dialog({ 
     position : ['center',10], 
     dialogClass: "fixed-dialog" 
    }); 

Answer 2

Không có câu trả lời tôi tìm thấy trên internet hài lòng tôi trong khi tôi đang tìm kiếm tại giải pháp. Ngay cả cái này cũng không. Sau khi đọc nhiều hơn về tài liệu API của JQuery, I found something really interesting. Khi trang web này mô tả, bạn có thể ràng buộc một sự kiện mà nó sẽ được thực hiện sau khi yêu cầu ajax đã thực hiện công việc của mình. Thing là, nó không đơn giản như thế này; Khi tôi đang thực hiện các thử nghiệm của riêng mình, sử dụng ví dụ được cung cấp trong tài liệu API, tôi không thể làm cho nó hoạt động. Dường như hộp thoại JQuery của tôi không tồn tại theo ngữ cảnh "tương lai".

Điều này dẫn tôi đến this page mô tả đó là: Đính kèm trình xử lý sự kiện cho tất cả các yếu tố phù hợp với bộ chọn hiện tại, hiện tại và trong tương lai. Tìm điều này dẫn tôi tạo một chức năng như thế này:

$(document).live("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

Và thì đấy! Nó hoạt động như một say mê! Sau khi yêu cầu ajax được thực hiện, thuộc tính vị trí được thay đổi và thích nghi với nội dung của div và kích thước của nó!

Hy vọng nó sẽ giúp mọi người trong tương lai!

EDIT: Bạn có thể muốn sử dụng hàm ".on()" thay vì ".live()". Kể từ khi tôi viết câu trả lời của tôi, nó có vẻ như chức năng ".live()" như đã bị xóa trong phiên bản 1.9 của jQuery và thay thế bằng cái mới. Một giải pháp thích hợp hơn cho người sử dụng jQuery> = 1,9 sẽ là một cái gì đó như thế này:

$(document).on("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

Answer 3

Use this 
    modal: true, 
    width: '80%', 
    autoResize:true, 
    resizable: true, 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    } 

trật tự phải có cùng

Answer 4

tôi sử dụng hàm:

function centerDialog(id){ 

    var d = $('#'+id).closest('.ui-dialog'), 
     w = $(window); 

    d.css({ 

    'top':(w.height()-d.outerHeight())/2, 
    'left':(w.width()-d.outerWidth())/2 

    }); 

}