Comment centrer automatiquement la boîte de dialogue de l'interface utilisateur jQuery lors du redimensionnement du navigateur?

Lorsque vous utilisez la boîte de dialogue de l'interface utilisateur jquery, tout fonctionne bien, sauf pour une chose. Lorsque le navigateur est redimensionné, la boîte de dialogue reste simplement dans sa position initiale, ce qui peut être vraiment ennuyeux.

Vous pouvez le tester sur: http://jqueryui.com/demos/dialog/

Cliquez sur l'exemple "boîte de dialogue modale" et redimensionnez votre navigateur.

J'adorerais pouvoir laisser les boîtes de dialogue se centrer automatiquement lorsque le navigateur se redimensionne. Est-ce que cela peut être fait de manière efficace pour toutes mes boîtes de dialogue dans mon application?

Merci beaucoup!

La définition de l' positionoption forcera cela, alors utilisez simplement le même sélecteur couvrant toutes vos boîtes de dialogue où j'utilise #dialogici (s'il ne les trouve pas, aucune action n'est prise, comme tous les jQuery):

jQuery UI avant la 1.10

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

jQuery UI 1.10 ou supérieur

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

Voici la même page de démonstration de l'interface utilisateur jQuery en ajoutant uniquement le code ci - dessus , nous ajoutons simplement un gestionnaire à l' resizeévénement de la fenêtre avec .resize(), donc il déclenche le recentrage au moment opportun.

Alternativement à la réponse d'Ellesedil,

Cette solution n'a pas fonctionné pour moi tout de suite, j'ai donc fait ce qui suit qui est également 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 cependant

ÉDITER:

Version beaucoup plus courte qui fonctionne très bien pour les dialogues uniques:

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

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

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

Une adaptation du code de pertinence de ce fil est ci-dessous. Cette extension crée essentiellement un nouveau paramètre de dialogue appelé autoReposition qui accepte un vrai ou un faux. Le code tel qu'il est écrit définit par défaut l'option sur true. Mettez-le dans un fichier .js de votre projet afin que vos pages puissent en tirer parti.

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

Désormais, cette boîte de dialogue se repositionnera toujours. AutoReposition (ou 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 est redimensionnée. Comme vous le définissez lorsque vous créez la boîte de dialogue, vous n'avez pas besoin d'identifier une boîte de dialogue d'une manière ou d'une autre, car la fonctionnalité de repositionnement est intégrée dans la boîte de dialogue elle-même. Et la meilleure partie est que, comme cela est défini par boîte de dialogue, vous pouvez demander à certaines boîtes de dialogue de se repositionner et d'autres restent là 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 doivent être égales à la moitié de votre hauteur et à la moitié de votre largeur. Donc, dans ce cas, ma boîte de dialogue mesure 720px de large sur 400px de haut. Cela le centre verticalement et horizontalement.

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

Alternativement, la position jQuery ui peut être utilisée,

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

Bonjour à tous!

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