Định vị hộp thoại jqueryui

Question

Tôi đang sử dụng giao diện người dùng JQuery và muốn định vị hộp thoại của mình theo chiều ngang ở giữa nhưng thẳng đứng ở giữa, có thể bằng một lượng pixel cố định hoặc khoảng cách tương đối từ đầu trang. Có cách nào làm dễ hơn không? Có vẻ như chỉ có một vài giá trị được xác định trước hoặc tôi có thể sử dụng vị trí chính xác nhưng có cách nào dễ dàng để thực hiện việc này không?

$("#dialog-form").dialog({ 
       autoOpen: false, 
       width: 630, 
       position: 'center', 
       modal: true, 
       resizable: false, 
       closeOnEscape: false 

      }); 

Answer 1

Sử dụng position option để căn chỉnh đầu hộp thoại với đầu cửa sổ (cộng với điểm ảnh hoặc phần trăm bù đắp).

Điều này sẽ căn giữa hộp thoại theo chiều ngang và đặt nó cách 150 pixel từ trên cùng.

$("#dialog-form").dialog({ 
    autoOpen: false, 
    width: 630, 
    position: { my: 'top', at: 'top+150' }, 
    modal: true, 
    resizable: false, 
    closeOnEscape: false 
}); 

Phiên bản cũ hơn của giao diện người dùng jQuery đã sử dụng một mảng chứa cặp tọa độ [x, y] ở góc pixel, góc trên cùng của chế độ xem (ví dụ: [350,100]).

var dialogWidth = 630; 
$("#dialog-form").dialog({ 
    // ... 
    width: dialogWidth, 
    position: [($(window).width()/2) - (dialogWidth/2), 150], 
    // ... 
}); 

Answer 2

áp dụng css vào # sử dụng hộp thoại dạng mẫu% bạn

nếu chiều rộng = 1.000

đặt

trái: 50% margin-left: -500px;

để đặt trọng tâm. hoặc bạn có thể sử dụng khung nội tuyến.

Answer 3

tôi tình cờ gặp trong khi điều này tìm kiếm cùng một câu hỏi bu i đã có câu trả lời của tôi:

position: ['center', 'top+100'] 

này sẽ tập trung theo chiều ngang và 100 pixel ở phía trên

này hoạt động cũng

position: ['center', 'center+100'] 

trung tâm theo chiều ngang và 100 pixel từ dưới trung tâm

Answer 4

Tôi đã điều chỉnh câu trả lời của Exlord cho vừa.

số các mục: [ 'trung tâm-7%', 'trung 12%']

này điều chỉnh theo chiều ngang và theo chiều dọc

$(".popup").dialog({  
position: ['center-7%', 'center-12%'], 
title: 'Updating', 
    width: "auto", 
} 
}); 

Answer 5

này làm việc cho tôi

position: { my: "center", at: "center", of: window }, 

Ngoài ra, bạn có thể kiểm tra các vị trí của hộp thoại tại đây
Find Position

Answer 6

Hãy thử điều này:

position: { 
     my: 'top', 
     at: 'top', 
     of: $('#some-div') 
    }, 

Answer 7

position: { 
    my: 'top', 
    at: 'top+150' 
} 

Làm việc cho tôi.