Posisi dialog jQuery UI

116

Saya mencoba menggunakan pustaka UI dialog jQuery untuk memposisikan dialog di sebelah beberapa teks saat di-hover. Dialog jQuery mengambil parameter posisi yang diukur dari sudut kiri atas viewport saat ini (dengan kata lain, [0, 0]akan selalu meletakkannya di sudut kiri atas jendela browser Anda, di mana pun Anda saat ini menggulir). Namun, satu-satunya cara yang saya tahu untuk mengambil lokasi adalah elemen relatif terhadap halaman SELURUH.

Berikut ini adalah apa yang saya miliki saat ini. position.topdihitung menjadi sekitar 1200 atau lebih, yang menempatkan dialog jauh di bawah konten lainnya pada halaman.

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

Bagaimana saya bisa menemukan posisi yang benar?

Terima kasih!

jquery  jquery-ui 
— Wickethewok
sumber
2
Mulai versi 1.9 ada widget tooltip asli.
— theblang

Jawaban:

13

Lihat beberapa plugin jQuery untuk implementasi dialog lainnya. Cluetip tampaknya adalah plug-in gaya tooltip / dialog yang kaya fitur. Demo ke-4 terdengar mirip dengan apa yang Anda coba lakukan (meskipun saya melihat bahwa itu tidak memiliki opsi pemosisian yang tepat yang Anda cari.)

— Ben Koehler
sumber
Tautan rusak. Saya berani mengatakan plugin ini tidak lagi dipertahankan. Mungkin bijaksana untuk memilih jawaban lain?
— JohnK
109

Sebagai alternatif, Anda bisa menggunakan utilitas jQuery UIPosition misalnya

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
— Brian M. Hunt
sumber
29
Ini adalah pendekatan terbaik. Saya akan perhatikan, bahwa jika Anda membuat dialog untuk pertama kalinya, Anda memerlukan panggilan tambahan untuk dialogseperti ini:$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
— wsanville
26
Utilitas posisi jQuery UI tidak berfungsi pada elemen tersembunyi sehingga Anda harus membuka dialog sebelum memposisikannya dengan kode ini.
— Toadmyster
1
jQuery UI adalah cara terbaik untuk melakukannya. Scott González memiliki penjelasan mendalam tentang cara kerja jQuery UI dan cara menggunakannya
— strangeloops
Saya merasa membingungkan bahwa misalnya harus: at: 'top+50'bukannyaat: 'top + 50'
— Lamy
Bagi siapa pun yang berjuang (seperti saya dulu) dengan cara menetapkan lebih dari satu posisi, seperti ini: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
— milpool
81

Berkat beberapa jawaban di atas, saya bereksperimen dan akhirnya menemukan bahwa yang perlu Anda lakukan hanyalah mengedit atribut "posisi" dalam definisi Modal Dialog:

position:['middle',20],

JQuery tidak memiliki masalah dengan teks "tengah" untuk nilai "X" horizontal dan dialog saya muncul di tengah, 20px ke bawah dari atas.

Saya menyukai JQuery.

— pengguna1288395
sumber
Bekerja tanpa plugin tambahan & intuitif. Solusi terbaik yang pernah saya lihat.
— PlanetUnknown
Solusi yang sangat sederhana, tanpa plugin tambahan. Ini harus menjadi jawaban yang diterima.
— kamui
13
Sial, itu bagus tapi sudah usang- "Catatan: Formulir String dan Array tidak digunakan lagi." api.jqueryui.com/dialog/#option-position Jadi, Anda perlu menggunakan objek posisi my / at / of thingy. Lihat link di sana tentang "jQuery UI Position". Anda bisa mendapatkan sesuatu seperti position: {my: "center top", di: "center top + 20", of: window} agar berfungsi seperti yang Anda inginkan. Lihat tautan untuk lebih banyak contoh.
— mikato
@mikato ... menurut jquery ui 1.10 , posisi tidak menerima string dan array. ... ... tapi saya masih suka notasi objek (saya suka tombolnya).
— dsdsdsdsd
3
Saya tidak percaya bahwa Anda memerlukan begitu banyak kode hanya untuk memposisikan popup dialog.
— Gi1ber7
42

Setelah membaca semua balasan, ini akhirnya berhasil untuk saya:

$(".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
sumber
Jawaban ini berhasil untuk saya, dan mungkin menghemat banyak menit / jam untuk googling cara mengatur solusi lain. Terima kasih!
— Nathan
1
+1 Itu sangat membantu saya ketika saya mengerti .position () memberikan posisi relatif dan .offset (), posisi absolut (apa yang saya butuhkan)
— daniloquio
16

Mengambil contoh Jaymin selangkah lebih maju, saya menemukan ini untuk memposisikan elemen ui-dialog jQuery di atas elemen yang baru saja Anda klik (pikirkan "gelembung ucapan"):

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

Perhatikan bahwa saya "membuka" elemen ui-dialog sebelum menghitung offset lebar dan tinggi relatif. Ini karena jQuery tidak dapat mengevaluasi outerWidth () atau outerHeight () tanpa elemen ui-dialog yang secara fisik muncul di halaman.

Pastikan untuk menyetel 'modal' ke false dalam opsi dialog Anda dan Anda seharusnya baik-baik saja.

— Ditandai
sumber
1
Saya pikir kedua variabel Anda dimaksudkan untuk menjadi myDialogXdanmyDialogY
— casey
16

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

Contoh untuk dialog tetap di pojok kiri atas:

$("#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
sumber
bagi saya ini adalah yang paling sederhana untuk diikuti, hanya atribut dan Anda mendapatkan solusinya. saya tidak tahu bahwa "posisi" dapat disebutkan dengan sintaks tanda kurung siku ini bersama dengan tinggi / lebar dll di atas sana.
— pengguna734028
saya tidak tahu, sudah terlalu lama: D
— xhochn
15

Periksa Anda <!DOCTYPE html>

Saya perhatikan bahwa jika Anda melewatkan <!DOCTYPE html>bagian atas file HTML Anda, dialog ditampilkan di tengah dalam konten dokumen bukan di dalam jendela, meskipun Anda menentukan posisi: {my: 'center', at: 'center' , dari: window}

Misalnya: http://jsfiddle.net/npbx4561/ - Salin konten dari jendela run dan hapus DocType. Simpan sebagai HTML dan jalankan untuk melihat masalahnya.

— Daniel Flippance
sumber
2
Ini adalah masalah sebenarnya yang saya miliki, dan ini memperbaikinya.
— BobRodes
1
Transformasi xml saya gagal menambahkan doctype, jawaban ini bersama dengan: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt membuat segalanya bergulir untuk saya.
— Daniel Bower
1
Saya berharap lebih dari 1 suara positif untuk jawaban hebat ini. Itu memperbaiki masalah saya yang saya perjuangkan selama berjam-jam.
— Dr. DS
10

Untuk meletakkannya tepat di atas kendali, Anda dapat menggunakan kode ini:

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

...
    });
— cinta hidup
sumber
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]});
}

Memposisikan dialog tepat di bawah elemen. Saya menggunakan fungsi offset () hanya karena menghitung posisi relatif terhadap sudut kiri atas browser, tetapi fungsi position () menghitung posisi relatif terhadap div induk atau iframe induk elemen tersebut.

— M. Belen
sumber
6

daripada melakukan jquery murni, saya akan melakukan:

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

jika saya memahami pertanyaan Anda dengan benar, kode yang Anda miliki adalah memposisikan dialog seolah-olah halaman tidak memiliki gulungan, tetapi Anda ingin agar dialog tersebut mempertimbangkan pengguliran tersebut. kode saya harus melakukan itu.

— Samuel
sumber
Untuk beberapa alasan, document.scrollleft tidak ditentukan bagi saya.
— Wickethewok
2
saya buruk, scrollLeft scrollTop lupa untuk memanfaatkan
— Samuel
var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); bekerja untuk saya. Masalahnya adalah saya tidak bisa mendapatkan tinggi dan lebar dialog setelah saya mengubah info di dalamnya.
— rball
4

Halaman ini menunjukkan bagaimana menentukan offset gulir Anda. jQuery mungkin memiliki fungsi serupa tetapi saya tidak dapat menemukannya. Dengan menggunakan fungsi getScrollXY yang ditampilkan di halaman, Anda harus dapat mengurangi koefisien x dan y dari hasil .position ().

— Philip Tinney
sumber
4

agak terlambat tetapi Anda dapat melakukan ini sekarang dengan menggunakan $ j (object) .offset (). left dan .top sesuai.

— pengguna363690
sumber
4

Menurut saya balon ucapan itu kurang tepat. Saya men-tweaknya sedikit agar berfungsi dan item terbuka tepat di bawah tautan.

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

Untuk memperbaiki posisi tengah, saya menggunakan:

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
sumber
3

Berikut kodenya .., bagaimana memposisikan dialog jQuery UI ke tengah ......

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
sumber
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
sumber
2

Anda dapat menggunakan $(this).offset(), posisi terkait dengan orang tua

— neil tang
sumber
2

Saya sudah mencoba semua solusi yang diusulkan tetapi mereka tidak akan berhasil karena dialog bukan bagian dari dokumen utama dan akan memiliki lapisannya sendiri (tapi itu tebakan saya).

  1. Inisialisasi dialog dengan $("#dialog").dialog("option", "position", 'top')
  2. Buka dengan $(dialog).dialog("open");

  3. Kemudian dapatkan x dan y dari dialog yang ditampilkan (bukan node lain dari dokumen!)

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

Dengan cara ini koordinat berasal dari dialog bukan dari dokumen dan posisinya diubah sesuai dengan lapisan dialog.

— Tuan Gunung
sumber
1

Saya mencoba banyak cara untuk membuat dialog saya terpusat pada halaman dan melihat bahwa kodenya:

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

jangan pernah mengubah posisi dialog saat ini dibuat.

Alih-alih, saya mengubah level pemilih untuk mendapatkan seluruh dialog.

$("#dialog").parent() <- Ini adalah objek induk yang dibuat oleh fungsi dialog () pada DOM, ini karena pemilih $ ("# dialog") tidak menerapkan atribut, top, left.

Untuk memusatkan dialog saya, saya menggunakan jQuery-Client-Centering-Plugin

$ ("# dialog"). parent (). centerInClient ();

— jmozko
sumber
1

solusi di atas sangat benar ... tetapi dialog UI tidak mempertahankan posisi setelah jendela diubah ukurannya. kode di bawah ini melakukan ini

            $(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
sumber
0

Anda dapat mengatur posisi teratas dalam gaya untuk tampilan di tengah, lihat bahwa kode:

.ui-dialog {top: 100px! important;}

Gaya ini akan menampilkan kotak dialog 100px di bawah dari atas.

— sanjay jangid
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.