Định vị hộp thoại jQuery UI

116

Tôi đang cố gắng sử dụng thư viện giao diện người dùng hộp thoại jQuery để định vị hộp thoại bên cạnh một số văn bản khi nó được di chuột qua. Hộp thoại jQuery nhận tham số vị trí được đo từ góc trên cùng bên trái của chế độ xem hiện tại (nói cách khác, [0, 0]sẽ luôn đặt nó ở góc trên bên trái của cửa sổ trình duyệt của bạn, bất kể bạn hiện đang cuộn đến đâu). Tuy nhiên, cách duy nhất tôi biết để truy xuất vị trí là của phần tử liên quan đến trang TOÀN BỘ.

Sau đây là những gì tôi có hiện tại. position.topđược tính bằng 1200 hoặc hơn, điều này sẽ đặt hộp thoại bên dưới phần nội dung còn lại trên trang.

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

Làm thế nào tôi có thể tìm thấy vị trí chính xác?

Cảm ơn!

jquery jquery-ui

— Wickethewok
nguồn

2

Kể từ phiên bản 1.9, có một tiện ích chú giải công cụ gốc.

— theblang

13

Kiểm tra một số plugin jQuery để biết các triển khai khác của hộp thoại. Cluetip dường như là một plugin kiểu hộp thoại / chú giải công cụ giàu tính năng. Bản demo thứ 4 nghe tương tự như những gì bạn đang cố gắng làm (mặc dù tôi thấy rằng nó không có tùy chọn định vị chính xác mà bạn đang tìm kiếm.)

— Ben Koehler
nguồn

Liên kết bị hỏng. Tôi dám chắc rằng plugin này không còn được duy trì. Có lẽ sẽ là khôn ngoan nếu chọn một câu trả lời khác?

— JohnK

109

Thay vào đó, bạn có thể sử dụng tiện ích jQuery UI,Position ví dụ:

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

— Brian M. Hunt
nguồn

29

Đây là cách tiếp cận tốt nhất. Tôi sẽ lưu ý rằng, nếu bạn đang tạo hộp thoại lần đầu tiên, bạn sẽ cần một cuộc gọi thêm để dialognhư thế này:

$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });

— wsanville

26

Tiện ích định vị giao diện người dùng jQuery không hoạt động trên các phần tử ẩn, vì vậy bạn phải mở hộp thoại trước khi định vị nó bằng mã này.

— Toadmyster

1

jQuery UI là cách tốt nhất để làm điều đó. Scott González có một chiều sâu giải thích về cách jQuery UI hoạt động và cách sử dụng nó

— strangeloops

Tôi tìm thấy nó khó hiểu rằng ví dụ như nó phải là: at: 'top+50'thay vìat: 'top + 50'

— Lamy

cho bất cứ ai đang gặp khó khăn (như tôi chỉ là) với cách thiết nhiều hơn một vị trí đó là như thế này: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— milpool

81

Nhờ một số câu trả lời ở trên, tôi đã thử nghiệm và cuối cùng nhận thấy rằng tất cả những gì bạn cần làm là chỉnh sửa thuộc tính "position" trong định nghĩa của Modal Dialog:

position:['middle',20],

JQuery không gặp vấn đề gì với văn bản "giữa" cho giá trị "X" nằm ngang và hộp thoại của tôi xuất hiện ở giữa, cách trên cùng 20px.

Tôi thích JQuery.

— người dùng1288395
nguồn

Hoạt động mà không cần bất kỳ plugin bổ sung nào và trực quan. Giải pháp tốt nhất tôi đã thấy.

— PlanetUnknown,

Giải pháp đơn giản tuyệt vời, không có bổ sung bổ sung. Đây phải là câu trả lời được chấp nhận.

— kamui

13

Darn, điều đó thật tuyệt nhưng nó không được dùng nữa- "Lưu ý: Các dạng Chuỗi và Mảng không được dùng nữa." api.jqueryui.com/dialog/#option-position Vì vậy, bạn cần sử dụng đối tượng vị trí my / at / of thingy. Xem liên kết ở đó về "jQuery UI Position". Bạn có thể nhận được một cái gì đó như vị trí: {my: "center top", tại: "center top + 20", of: window} để hoạt động như bạn muốn. Xem liên kết để biết thêm ví dụ.

— mikato

@mikato ... theo jquery ui 1.10 , vị trí chấp nhận chuỗi và mảng. ... ... nhưng tôi vẫn thích ký hiệu đối tượng (tôi thích các phím).

— dsdsdsdsd

3

Tôi không thể tin rằng bạn cần quá nhiều mã chỉ để định vị một cửa sổ bật lên hộp thoại.

— Gi1ber7

42

Sau khi đọc tất cả các câu trả lời, điều này cuối cùng đã làm việc cho tôi:

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

— Jaymin Patel
nguồn

Câu trả lời này phù hợp với tôi và giúp tôi tiết kiệm được nhiều phút / giờ trên googling cách thiết lập các giải pháp khác. Cảm ơn bạn!

— Nathan

1

1 Nó đã giúp tôi rất nhiều khi tôi hiểu .position () cho phép vị trí tương đối và .offset (), vị trí tuyệt đối (những gì tôi cần)

— daniloquio

16

Lấy ví dụ của Jaymin thêm một bước nữa, tôi đã nghĩ ra điều này để định vị phần tử ui-hộp thoại jQuery phía trên phần tử bạn vừa nhấp (nghĩ là "bong bóng thoại"):

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

Lưu ý rằng tôi "mở" phần tử ui-hộp thoại trước khi tính toán hiệu số chiều rộng và chiều cao tương đối. Điều này là do jQuery không thể đánh giá externalWidth () hoặc externalHeight () mà không có phần tử ui-hộp thoại xuất hiện trên trang.

Chỉ cần đảm bảo đặt 'modal' thành false trong tùy chọn hộp thoại của bạn và bạn sẽ đồng ý.

— đánh dấu
nguồn

1

Tôi nghĩ rằng hai biến của bạn có nghĩa là myDialogXvàmyDialogY

— casey

16

http://docs.jquery.com/UI/API/1.8/Dialog

Ví dụ cho hộp thoại cố định ở góc trên cùng bên trái:

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});

— xhochn
nguồn

đối với tôi đây là cách đơn giản nhất để làm theo, chỉ cần một thuộc tính và bạn sẽ có được giải pháp. tôi không biết rằng "vị trí" có thể được đề cập với cú pháp dấu ngoặc vuông này cùng với chiều cao / chiều rộng, v.v. ở đó.

— user734028

tôi không có đầu mối, là quá lâu rồi: D

— xhochn

15

Kiểm tra của bạn <!DOCTYPE html>

Tôi nhận thấy rằng nếu bạn bỏ sót <!DOCTYPE html>từ đầu tệp HTML của mình, hộp thoại sẽ được hiển thị ở giữa nội dung tài liệu không nằm trong cửa sổ, ngay cả khi bạn chỉ định vị trí: {my: 'center', tại: 'center' , của: window}

EG: http://jsfiddle.net/npbx4561/ - Sao chép nội dung từ cửa sổ chạy và gỡ bỏ DocType. Lưu dưới dạng HTML và chạy để xem sự cố.

— Daniel Flippance
nguồn

2

Đây là vấn đề chính xác mà tôi gặp phải và điều này đã khắc phục nó.

— BobRodes

1

Chuyển đổi xml của tôi không thể thêm loại tài liệu, câu trả lời này cùng với: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt đã giúp tôi có nhiều thứ.

— Daniel Bower

1

Tôi ước có nhiều hơn 1 phiếu ủng hộ cho câu trả lời tuyệt vời này. Nó đã khắc phục sự cố của tôi mà tôi đã phải vật lộn trong nhiều giờ.

— Tiến sĩ DS

10

Để đặt nó ngay trên quyền kiểm soát, bạn có thể sử dụng mã này:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });

— tình yêu sống
nguồn

7

$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

Định vị hộp thoại ngay dưới một phần tử. Tôi đã sử dụng hàm offset () chỉ vì nó tính toán vị trí liên quan đến góc trên bên trái của trình duyệt, nhưng hàm position () tính toán vị trí liên quan đến div cha hoặc iframe cha đó của phần tử.

— M. Belen
nguồn

6

thay vì làm jquery thuần túy, tôi sẽ làm:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

nếu tôi hiểu câu hỏi của bạn một cách chính xác, mã bạn có đang định vị hộp thoại như thể trang không có cuộn, nhưng bạn muốn nó tính đến cuộn. mã của tôi nên làm điều đó.

— Samuel
nguồn

Vì một số lý do, document.scrollleft không được xác định đối với tôi.

— Wickethewok

2

xấu của tôi, cuộn của nó Cuộn bên trái quên viết hoa

— Samuel

var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); đã làm cho tôi. Vấn đề là tôi không thể lấy chiều cao và chiều rộng của hộp thoại sau khi tôi thay đổi thông tin trong đó.

— rball

4

Đây trang chương trình làm thế nào để xác định di chuyển của bạn bù đắp. jQuery có thể có chức năng tương tự nhưng tôi không tìm thấy. Sử dụng hàm getScrollXY được hiển thị trên trang, bạn sẽ có thể trừ các coords x và y khỏi kết quả .position ().

— Philip Tinney
nguồn

4

hơi muộn nhưng bạn có thể làm điều này ngay bây giờ bằng cách sử dụng $ j (object) .offset (). left và .top tương ứng.

— người dùng363690
nguồn

4

Tôi không nghĩ rằng bong bóng lời nói là hoàn toàn đúng. Tôi đã chỉnh sửa một chút để nó hoạt động và mục sẽ mở ra ngay dưới liên kết.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

— vách đá
nguồn

3

Để cố định vị trí trung tâm, tôi sử dụng:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

— Eduardo Cuomo
nguồn

3

Đây là mã .., cách đặt hộp thoại jQuery UI vào giữa ......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });

— Manu RS
nguồn

3

$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });

— Günes Erdemi
nguồn

2

bạn có thể sử dụng $(this).offset(), vị trí liên quan đến cha mẹ

— neil tang
nguồn

2

Tôi đã thử tất cả các giải pháp được đề xuất nhưng chúng sẽ không hoạt động vì hộp thoại không phải là một phần của tài liệu chính và sẽ có lớp riêng của nó (nhưng đó là phỏng đoán của tôi).

Khởi tạo hộp thoại với $("#dialog").dialog("option", "position", 'top')
Mở nó bằng $(dialog).dialog("open");
Sau đó, lấy x và y của hộp thoại được hiển thị (không phải bất kỳ nút nào khác của tài liệu!)

var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

$(dialog).dialog('option', 'position', [xcoord , ycoord]);

Bằng cách này, tọa độ lấy từ hộp thoại chứ không phải từ tài liệu và vị trí được thay đổi theo lớp của hộp thoại.

— Mr.Mountain
nguồn

1

Tôi đã thử nhiều cách để hộp thoại của mình được căn giữa trang và thấy rằng mã:

$("#dialog").dialog("option", "position", 'top')

không bao giờ thay đổi vị trí hộp thoại khi nó được tạo.

Thay vào đó, tôi thay đổi mức bộ chọn để nhận toàn bộ hộp thoại.

$("#dialog").parent() <- Đây là đối tượng mẹ mà hàm hộp thoại () tạo trên DOM, điều này là do bộ chọn $ ("# hộp thoại") không áp dụng các thuộc tính, trên cùng, bên trái.

Để căn giữa hộp thoại của tôi, tôi sử dụng jQuery-Client-Centering-Plugin

$ ("# hộp thoại"). parent (). centerInClient ();

— jmozko
nguồn

1

các giải pháp trên là rất đúng ... nhưng hộp thoại giao diện người dùng không giữ nguyên vị trí sau khi cửa sổ được thay đổi kích thước. mã dưới đây thực hiện điều này

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })

— Kaustubh - KAY
nguồn

0

Bạn có thể đặt vị trí hàng đầu trong phong cách để hiển thị ở trung tâm, thấy rằng mã:

.ui-hộp thoại {top: 100px! important;}

Kiểu này sẽ hiển thị hộp thoại 100px ở phía dưới từ trên xuống.

— sanjay jangid
nguồn