Comment Auto-center jQuery UI dialogue lors du redimensionnement du navigateur?

Alternativement à la réponse D'Ellesedil,

Cette solution n'a pas fonctionné pour moi tout de suite, donc j'ai fait ce qui suit qui est aussi une version dynamique mais raccourcie:

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

+1 pour Ellesedil si

Modifier:

Version beaucoup plus courte qui fonctionne très bien pour les boîtes de dialogue simples:

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

Il n'est pas nécessaire .each () à utiliser peut-être si vous avez des boîtes de dialogue uniques que vous ne voulez pas toucher.

Une réponse plus complète, qui utilise la réponse de Nick d'une manière plus flexible peut être trouvée ici.

Une adaptation du code de pertinence de ce thread est ci-dessous. Cette extension crée essentiellement un nouveau paramètre de dialogue appelé autoReposition qui accepte un vrai ou faux. Le code comme écrit par défaut l'option à true. Mettre cela en un .fichier js dans votre projet afin que vos pages puissent l'exploiter.

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

Cela vous permet de fournir un "vrai" ou "faux" pour cela nouveau paramètre lorsque vous créez votre boîte de dialogue sur votre page.

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

Maintenant, cette boîte de dialogue se repositionnera toujours. AutoReposition (ou tout ce que vous appelez le paramètre) peut gérer toutes les boîtes de dialogue qui n'ont pas de position par défaut et les repositionner automatiquement lorsque la fenêtre se redimensionne. Puisque vous définissez cela lorsque vous créez la boîte de dialogue, vous n'avez pas besoin d'identifier une boîte de dialogue car la fonctionnalité de repositionnement est intégrée dans la boîte de dialogue elle-même. Et la meilleure partie est que, depuis ceci est défini par boîte de dialogue, vous pouvez avoir certaines boîtes de dialogue se repositionner et d'autres restent où elles sont.

Crédit à l'utilisateur scott.gonzalez sur les forums jQuery pour la solution complète.

Une autre option CSS uniquement qui fonctionne est la suivante. Les marges négatives devraient être égales à la moitié de votre hauteur et à la moitié de votre largeur. Donc, dans ce cas, ma boîte de dialogue est de 720px de large par 400px de haut. Ce centre verticalement et horizontalement.

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

Sinon jQuery ui position peut être utilisé,

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

Bonjour à tous!

Solution js vanille:

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