การวางตำแหน่งกล่องโต้ตอบ jQuery UI

116

ฉันกำลังพยายามใช้ไลบรารีUI ของกล่องโต้ตอบ jQueryเพื่อวางตำแหน่งกล่องโต้ตอบถัดจากข้อความบางส่วนเมื่อวางเมาส์เหนือ กล่องโต้ตอบ jQuery รับพารามิเตอร์ตำแหน่งซึ่งวัดจากมุมบนซ้ายของวิวพอร์ตปัจจุบัน (หรืออีกนัยหนึ่ง[0, 0]จะวางไว้ที่มุมซ้ายบนของหน้าต่างเบราว์เซอร์เสมอไม่ว่าคุณจะเลื่อนไปที่ใดในปัจจุบัน) อย่างไรก็ตามวิธีเดียวที่ฉันรู้ในการดึงข้อมูลตำแหน่งคือองค์ประกอบที่สัมพันธ์กับหน้าทั้งหมด

ต่อไปนี้คือสิ่งที่ฉันมีอยู่ในขณะนี้ position.topคำนวณให้เป็นประมาณ 1200 หรือมากกว่านั้นซึ่งวางกล่องโต้ตอบไว้ด้านล่างส่วนที่เหลือของเนื้อหาในหน้า

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

ฉันจะหาตำแหน่งที่ถูกต้องได้อย่างไร?

ขอบคุณ!

jquery jquery-ui

— Wickethewok
แหล่งที่มา

2

ในเวอร์ชัน 1.9 มีวิดเจ็ตคำแนะนำเครื่องมือดั้งเดิม

— theblang

13

ตรวจสอบปลั๊กอิน jQuery สำหรับการใช้งานไดอะล็อกอื่น ๆ Cluetipดูเหมือนจะเป็นปลั๊กอินรูปแบบคำแนะนำ / ไดอะล็อกที่มีคุณลักษณะมากมาย การสาธิตครั้งที่ 4 ฟังดูคล้ายกับสิ่งที่คุณพยายามทำ (แม้ว่าฉันจะเห็นว่ามันไม่มีตัวเลือกการระบุตำแหน่งที่แม่นยำที่คุณกำลังมองหา)

— Ben Koehler
แหล่งที่มา

ลิงก์เสีย ฉันกล้าว่าปลั๊กอินนี้จะไม่ได้รับการดูแลอีกต่อไป บางทีอาจเป็นการฉลาดที่จะเลือกคำตอบอื่น

— JohnK

109

คุณสามารถใช้ยูทิลิตี jQuery UIPositionเช่น

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

— Brian M. Hunt
แหล่งที่มา

29

นี่คือแนวทางที่ดีที่สุด ฉันจะทราบว่าหากคุณกำลังสร้างกล่องโต้ตอบเป็นครั้งแรกคุณจะต้องมีการโทรพิเศษเพื่อdialogต้องการสิ่งนี้:

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

— wsanville

26

ยูทิลิตี้ตำแหน่ง jQuery UI ไม่ทำงานกับองค์ประกอบที่ซ่อนอยู่ดังนั้นคุณต้องเปิดกล่องโต้ตอบก่อนที่จะวางตำแหน่งด้วยรหัสนี้

— Toadmyster

1

jQuery UI เป็นวิธีที่ดีที่สุด Scott Gonzálezมีคำอธิบายเชิงลึกเกี่ยวกับการทำงานของ jQuery UI และวิธีการใช้งาน

— Strangeloops

ฉันรู้สึกสับสนว่ามันต้องเป็น: at: 'top+50'แทนat: 'top + 50'

— Lamy

สำหรับใครก็ตามที่กำลังดิ้นรน (อย่างที่ฉันเป็น) กับวิธีตั้งค่ามากกว่าหนึ่งตำแหน่งมันเป็นเช่นนี้: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— milpool

81

ด้วยคำตอบบางส่วนด้านบนฉันได้ทำการทดลองและในที่สุดก็พบว่าสิ่งที่คุณต้องทำคือแก้ไขแอตทริบิวต์ "ตำแหน่ง" ในคำจำกัดความของ Modal Dialog:

position:['middle',20],

JQuery ไม่มีปัญหากับข้อความ "กลาง" สำหรับค่า "X" แนวนอนและกล่องโต้ตอบของฉันโผล่ขึ้นมาตรงกลางโดยลงจากด้านบน 20px

ฉันชอบ JQuery

— user1288395
แหล่งที่มา

ทำงานได้โดยไม่ต้องใช้ปลั๊กอินเพิ่มเติมและใช้งานง่าย ทางออกที่ดีที่สุดที่ฉันเคยเห็น

— PlanetUnknown

วิธีแก้ปัญหาที่ง่ายอย่างน่าอัศจรรย์โดยไม่มีปลั๊กอินเพิ่มเติม นี่ควรเป็นคำตอบที่ได้รับการยอมรับ

— kamui

13

แย่ดี แต่เลิกใช้แล้ว - "หมายเหตุ: เลิกใช้งานรูปแบบสตริงและอาร์เรย์แล้ว" api.jqueryui.com/dialog/#option-position ดังนั้นคุณต้องใช้วัตถุตำแหน่ง my / at / of thingy ดูลิงก์เกี่ยวกับ "jQuery UI Position" คุณอาจได้รับตำแหน่ง: {my: "center top", at: "center top + 20", of: window} เพื่อทำงานตามที่คุณต้องการ ดูลิงค์สำหรับตัวอย่างเพิ่มเติม

— mikato

@mikato ... ตามjquery ui 1.10ตำแหน่งไม่ยอมรับสตริงและอาร์เรย์ ... ... แต่ฉันก็ยังชอบสัญกรณ์วัตถุ (ฉันชอบปุ่ม)

— dsdsdsdsd

3

ฉันไม่อยากจะเชื่อเลยว่าคุณต้องใช้รหัสมากมายเพียงเพื่อวางตำแหน่งป๊อปอัปโต้ตอบ

— Gi1ber7

42

หลังจากอ่านคำตอบทั้งหมดในที่สุดสิ่งนี้ก็ใช้ได้ผลสำหรับฉัน:

$(".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
แหล่งที่มา

คำตอบนี้ใช้ได้ผลสำหรับฉันและช่วยให้ฉันประหยัดเวลาได้หลายนาที / ชั่วโมงในการใช้วิธีตั้งค่าโซลูชันอื่น ๆ ขอบคุณ!

— Nathan

1

+1 มันช่วยฉันได้มากเมื่อฉันเข้าใจ .position () ให้ตำแหน่งสัมพัทธ์และ. offset () ตำแหน่งที่แน่นอน (สิ่งที่ฉันต้องการ)

— daniloquio

16

จากตัวอย่างของ Jaymin ไปอีกขั้นฉันได้คิดสิ่งนี้เพื่อวางตำแหน่งองค์ประกอบโต้ตอบ jQuery ui เหนือองค์ประกอบที่คุณเพิ่งคลิก (ให้คิดว่า "ลูกโป่งคำพูด"):

$('#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] );

โปรดทราบว่าฉัน "เปิด" องค์ประกอบของกล่องโต้ตอบ ui ก่อนคำนวณค่าชดเชยความกว้างและความสูงที่สัมพันธ์กัน เนื่องจาก jQuery ไม่สามารถประเมิน outerWidth () หรือ outerHeight () โดยไม่มีองค์ประกอบของกล่องโต้ตอบ ui ปรากฏในหน้า

อย่าลืมตั้งค่า 'โมดอล' เป็นเท็จในตัวเลือกกล่องโต้ตอบของคุณและคุณควรจะตกลง

— markedup
แหล่งที่มา

1

ฉันคิดว่าตัวแปรทั้งสองของคุณควรเป็นmyDialogXและmyDialogY

— casey

16

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

ตัวอย่างกล่องโต้ตอบคงที่ที่มุมบนด้านซ้าย:

$("#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
แหล่งที่มา

สำหรับฉันนี่เป็นวิธีที่ง่ายที่สุดที่จะทำตามเพียงแค่แอตทริบิวต์และคุณจะได้รับโซลูชัน ฉันไม่รู้ว่า "ตำแหน่ง" สามารถพูดถึงด้วยไวยากรณ์วงเล็บเหลี่ยมนี้พร้อมกับความสูง / ความกว้าง ฯลฯ ที่นั่น

— user734028

ฉันไม่มีเงื่อนงำนานเกินไปแล้ว: D

— xhochn

15

ตรวจสอบ .. ของคุณ <!DOCTYPE html>

ฉันสังเกตเห็นว่าหากคุณพลาด<!DOCTYPE html>จากด้านบนของไฟล์ HTML กล่องโต้ตอบจะแสดงอยู่กึ่งกลางภายในเนื้อหาเอกสารไม่อยู่ในหน้าต่างแม้ว่าคุณจะระบุตำแหน่ง: {my: 'center', at: 'center' , of: window}

EG: http://jsfiddle.net/npbx4561/ - คัดลอกเนื้อหาจากหน้าต่างรันและลบ DocType บันทึกเป็น HTML และเรียกใช้เพื่อดูปัญหา

— Daniel Flippance
แหล่งที่มา

2

นี่เป็นปัญหาที่แท้จริงที่ฉันมีและนี่ก็แก้ไขได้

— BobRodes

1

การแปลง xml ของฉันไม่สามารถเพิ่มประเภทหลักคำตอบนี้พร้อมกับ: stackoverflow.com/questions/3387127/set-html5-doctype-with-xsltมีสิ่งต่างๆมากมายสำหรับฉัน

— Daniel Bower

1

ฉันต้องการโหวตมากกว่า 1 คะแนนสำหรับคำตอบที่ยอดเยี่ยมนี้ มันแก้ไขปัญหาของฉันที่ฉันดิ้นรนเป็นเวลาหลายชั่วโมง

— ดร. DS

10

ในการวางไว้เหนือการควบคุมคุณสามารถใช้รหัสนี้:

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

...
    });

— ชีวิตความรัก
แหล่งที่มา

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]});
}

วางตำแหน่งกล่องโต้ตอบไว้ใต้องค์ประกอบ ฉันใช้ฟังก์ชัน offset () เพียงเพราะมันคำนวณตำแหน่งที่สัมพันธ์กับมุมบนซ้ายของเบราว์เซอร์ แต่ฟังก์ชัน position () จะคำนวณตำแหน่งที่สัมพันธ์กับ div พาเรนต์หรือ iframe ซึ่งเป็นพาเรนต์ขององค์ประกอบ

— M. เบเลน
แหล่งที่มา

6

แทนที่จะทำ jquery บริสุทธิ์ฉันจะทำ:

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

ถ้าฉันเข้าใจคำถามของคุณอย่างถูกต้องรหัสที่คุณมีจะวางตำแหน่งของกล่องโต้ตอบราวกับว่าหน้านั้นไม่มีการเลื่อน แต่คุณต้องการให้พิจารณาการเลื่อน รหัสของฉันควรทำเช่นนั้น

— ซามูเอล
แหล่งที่มา

ด้วยเหตุผลบางประการ document.scrollleft ไม่ได้กำหนดไว้สำหรับฉัน

— Wickethewok

2

ไม่ดีของฉันมันม้วนเลื่อนซ้ายด้านบนลืมใช้ประโยชน์

— ซามูเอล

var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); ทำงานให้ฉัน ปัญหาคือฉันไม่สามารถรับความสูงและความกว้างของกล่องโต้ตอบหลังจากที่ฉันเปลี่ยนข้อมูลในนั้น

— rball

4

หน้านี้แสดงวิธีกำหนดค่าชดเชยการเลื่อนของคุณ jQuery อาจมีฟังก์ชันการทำงานที่คล้ายกัน แต่ฉันหาไม่พบ เมื่อใช้ฟังก์ชัน getScrollXY ที่แสดงบนเพจคุณควรจะสามารถลบ coords x และ y ออกจากผลลัพธ์ .position () ได้

— ฟิลิปทินนีย์
แหล่งที่มา

4

ช้าไปหน่อย แต่คุณสามารถทำได้โดยใช้ $ j (object) .offset (). left และ .top ตามนั้น

— user363690
แหล่งที่มา

4

ฉันไม่คิดว่าฟองคำพูดนั้นค่อนข้างถูกต้อง ฉันปรับแต่งเล็กน้อยเพื่อให้มันใช้งานได้และรายการจะเปิดขึ้นใต้ลิงค์

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

— หน้าผา
แหล่งที่มา

3

ในการแก้ไขตำแหน่งกึ่งกลางฉันใช้:

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
แหล่งที่มา

3

นี่คือรหัส .. วิธีวางตำแหน่งกล่องโต้ตอบ jQuery UI ให้อยู่ตรงกลาง ......

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');

   });

— มนู RS
แหล่งที่มา

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
แหล่งที่มา

2

คุณสามารถใช้ได้$(this).offset()ตำแหน่งเกี่ยวข้องกับผู้ปกครอง

— นีลรส
แหล่งที่มา

2

ฉันได้ลองใช้วิธีแก้ปัญหาที่เสนอทั้งหมดแล้ว แต่ไม่ได้ผลเนื่องจากกล่องโต้ตอบไม่ได้เป็นส่วนหนึ่งของเอกสารหลักและจะมีเลเยอร์ของตัวเอง (แต่นั่นเป็นการเดาที่มีการศึกษาของฉัน)

เริ่มต้นกล่องโต้ตอบด้วย $("#dialog").dialog("option", "position", 'top')
เปิดด้วย $(dialog).dialog("open");
จากนั้นรับ x และ y ของกล่องโต้ตอบที่แสดง (ไม่ใช่โหนดอื่นของเอกสาร!)

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]);

วิธีนี้พิกัดมาจากกล่องโต้ตอบไม่ได้มาจากเอกสารและตำแหน่งจะเปลี่ยนไปตามชั้นของกล่องโต้ตอบ

— Mr.Mountain
แหล่งที่มา

1

ฉันพยายามหลายวิธีเพื่อให้กล่องโต้ตอบของฉันอยู่ตรงกลางหน้าและเห็นว่ารหัส:

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

อย่าเปลี่ยนตำแหน่งของกล่องโต้ตอบเมื่อสร้างขึ้น

แต่ฉันเปลี่ยนระดับตัวเลือกเพื่อรับกล่องโต้ตอบทั้งหมด

$("#dialog").parent() <- นี่คือออบเจ็กต์หลักที่ฟังก์ชันโต้ตอบ () สร้างขึ้นบน DOM เนื่องจากตัวเลือก $ ("# กล่องโต้ตอบ") ไม่ใช้แอตทริบิวต์ด้านบนซ้าย

เพื่อให้กล่องโต้ตอบของฉันอยู่ตรงกลางฉันใช้jQuery-Client-Centering-Plugin

$ ( "# โต้ตอบ") ผู้ปกครอง () centerInClient ()..;

— jmozko
แหล่งที่มา

1

วิธีแก้ปัญหาข้างต้นเป็นเรื่องจริงมาก ... แต่กล่องโต้ตอบ UI ไม่คงตำแหน่งไว้หลังจากปรับขนาดหน้าต่างแล้ว โค้ดด้านล่างทำสิ่งนี้

            $(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
แหล่งที่มา

0

คุณกำหนดตำแหน่งบนสุดในรูปแบบเพื่อแสดงตรงกลางเห็นว่ารหัส:

.ui- โต้ตอบ {ด้านบน: 100px! important;}

ลักษณะนี้ควรแสดงกล่องโต้ตอบ 100px ร้องจากด้านบน

— sanjay jangid
แหล่งที่มา