Tarayıcıyı yeniden boyutlandırırken jQuery UI iletişim kutusu nasıl otomatik ortalanır?

Jquery UI iletişim kutusunu kullandığınızda, bir şey dışında her şey iyi çalışır. Tarayıcı yeniden boyutlandırıldığında, iletişim kutusu başlangıç ​​konumunda kalır ve bu gerçekten can sıkıcı olabilir.

Şurada test edebilirsiniz: http://jqueryui.com/demos/dialog/

"Kalıcı iletişim kutusu" örneğini tıklayın ve tarayıcınızı yeniden boyutlandırın.

Tarayıcı yeniden boyutlandırıldığında diyalogların otomatik olarak ortalanmasına izin vermeyi çok isterim. Bu, uygulamamdaki tüm diyaloglarım için verimli bir şekilde yapılabilir mi?

Çok teşekkürler!

positionSeçeneği ayarlamak bunu zorlayacaktır, bu yüzden burada kullandığım tüm diyaloglarınızı kapsayan aynı seçiciyi kullanın #dialog(eğer bulamazsa, tüm jQuery gibi hiçbir işlem yapılmaz):

1.10'dan önceki jQuery kullanıcı arayüzü

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

jQuery UI 1.10 veya üstü

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

İşte sadece yukarıdaki kodu ekleyen aynı jQuery UI demo sayfası , pencerenin resizeetkinliğine sadece bir işleyici ekliyoruz .resize(), böylece uygun zamanda yeniden ortalamayı tetikliyor.

Ellesedil'in cevabına alternatif olarak,

Bu çözüm benim için hemen işe yaramadı, bu yüzden aşağıdakini yaptım ki bu da dinamik ama kısaltılmış bir versiyon:

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

Yine de Ellesedil için +1

DÜZENLE:

Tekli diyaloglar için harika çalışan çok daha kısa versiyon:

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

Dokunmak istemediğiniz bazı benzersiz diyaloglara sahipseniz .each () 'in kullanılması gerekli değildir.

Nick'in cevabını daha esnek bir şekilde kullanan daha kapsamlı bir cevap burada bulunabilir .

Bu konuya ilişkin alaka kodunun bir uyarlaması aşağıdadır. Bu uzantı, esasen, doğru veya yanlışı kabul eden autoReposition adlı yeni bir iletişim kutusu ayarı oluşturur. Kod yazıldığı şekliyle varsayılan olarak true seçeneğini belirler. Sayfalarınızın bundan yararlanabilmesi için bunu projenizdeki bir .js dosyasına koyun.

    $.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'));
            }
        });
    });

Bu, sayfanızda iletişim kutunuzu oluştururken bu yeni ayar için "doğru" veya "yanlış" sağlamanıza olanak tanır.

$(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");
            }
        }
    });
});

Şimdi bu iletişim kutusu her zaman kendisini yeniden konumlandıracaktır. Otomatik Yeniden Konumlandırma (veya ayarı ne derseniz deyin), varsayılan konumu olmayan tüm iletişim kutularını işleyebilir ve pencere yeniden boyutlandırıldığında bunları otomatik olarak yeniden konumlandırabilir. İletişim kutusunu oluşturduğunuzda bunu ayarladığınızdan, bir şekilde bir iletişim kutusu belirlemenize gerek yoktur çünkü yeniden konumlandırma işlevi iletişim kutusunun kendisinde yerleşik hale gelir. Ve en iyi yanı, bu her diyalog için ayarlandığından, bazı diyalogların kendilerini yeniden konumlandırmasına ve diğerlerinin olduğu yerde kalmasına sahip olmanızdır.

Tam çözüm için jQuery forumlarında scott.gonzalez kullanıcısına kredi verin.

Çalışan başka bir yalnızca CSS seçeneği budur. Negatif kenar boşlukları boyunuzun yarısına ve genişliğinizin yarısına eşit olmalıdır. Yani bu durumda, diyaloğum 720 piksel genişliğinde ve 400 piksel yüksekliğinde. Bu, onu dikey ve yatay olarak ortalar.

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

Alternatif olarak jQuery kullanıcı arabirimi konumu kullanılabilir,

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

Herkese merhaba!

Vanilla JS çözümü:

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