Bagaimana cara pusat otomatis dialog jQuery UI saat mengubah ukuran browser?

Saat Anda menggunakan dialog jquery UI, semuanya bekerja dengan baik, kecuali satu hal. Saat browser diubah ukurannya, dialog tetap berada di posisi awal yang bisa sangat mengganggu.

Anda dapat mengujinya di: http://jqueryui.com/demos/dialog/

Klik pada contoh "dialog modal" dan ubah ukuran browser Anda.

Saya ingin mengizinkan dialog menjadi pusat otomatis saat browser mengubah ukuran. Bisakah ini dilakukan dengan cara yang efisien untuk semua dialog saya di aplikasi saya?

Terima kasih banyak!

Mengatur positionopsi akan memaksa ini, jadi gunakan saja selektor yang sama yang mencakup semua dialog Anda di mana saya gunakan di #dialogsini (jika tidak menemukannya tidak ada tindakan yang diambil, seperti semua jQuery):

jQuery UI sebelum 1.10

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

jQuery UI 1.10 atau lebih tinggi

$(window).resize(function() {
    $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});

Inilah halaman demo UI jQuery yang sama yang hanya menambahkan kode di atas , kami hanya menambahkan penangan ke acara jendela resizedengan .resize(), sehingga memicu pusat ulang pada waktu yang tepat. </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> orang </s>

Atau jawaban Ellesedil,

Solusi itu tidak langsung berfungsi untuk saya, Jadi saya melakukan hal berikut yang juga merupakan versi dinamis tetapi dipersingkat:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

1 untuk Ellesedil sekalipun

EDIT:

Versi yang jauh lebih pendek yang berfungsi baik untuk satu dialog:

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

Tidak perlu .each () digunakan mungkin jika Anda memiliki beberapa dialog unik yang tidak ingin Anda sentuh.

Jawaban yang lebih komprehensif, yang menggunakan jawaban Nick dengan cara yang lebih fleksibel dapat ditemukan di sini .

Adaptasi dari kode relevansi dari utas itu ada di bawah. Ekstensi ini pada dasarnya membuat setelan dialog baru yang disebut autoReposition yang menerima benar atau salah. Kode sebagai default tertulis pilihan true. Masukkan ini ke dalam file .js dalam proyek Anda sehingga halaman Anda dapat memanfaatkannya.

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

Ini memungkinkan Anda untuk memberikan "benar" atau "salah" untuk pengaturan baru ini saat Anda membuat dialog di halaman Anda.

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

Sekarang dialog ini akan selalu mengubah posisinya sendiri. AutoReposition (atau apa pun yang Anda sebut pengaturan) dapat menangani dialog apa pun yang tidak memiliki posisi default dan secara otomatis mengubah posisinya saat jendela diubah ukurannya. Karena Anda menyetel ini saat membuat dialog, Anda tidak perlu mengidentifikasi dialog karena fungsionalitas pemosisian ulang sudah ada di dalam dialog itu sendiri. Dan bagian terbaiknya adalah karena ini diatur per dialog, Anda dapat membuat beberapa dialog mengubah posisinya sendiri dan yang lain tetap di tempatnya.

Penghargaan untuk pengguna scott.gonzalez di forum jQuery untuk solusi lengkapnya.

Opsi hanya CSS lain yang berfungsi adalah ini. Margin negatif harus sama dengan setengah tinggi dan setengah lebar Anda. Jadi dalam kasus ini, dialog saya adalah lebar 720px kali 400px. Ini memusatkannya secara vertikal dan horizontal.

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Sebagai alternatif, posisi ui jQuery dapat digunakan,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

Halo semuanya!

Solusi Vanilla JS:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());