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


101

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!

Réponses:


161

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.


merci, ça a l'air génial. J'aurais peut-être dû dire que je ne sais pas toujours quel est l'identifiant de ma boîte de dialogue, comme ceci (comment puis-je cibler cette boîte de dialogue?): Var $ dialog = $ ('<div> <a href = "#" title = "Cancel"> Cancel </a> </a> </div> ') .html (assetBrowser) .dialog ({autoOpen: false, title:' Gestionnaire d'actifs ', modal: true, closeOnEscape: true, boutons: boutons, largeur: 840, hauteur: 500}); $ dialog.dialog ('ouvrir');
Jorre

11
@Jorre - Ils obtiennent tous la même classe lorsque vous créez un dialogue, pour le rendre générique, vous pouvez le faire:, $(".ui-dialog-content").dialog("option", "position", "center");ceci vérifiera n'importe quel dialogue :)
Nick Craver

3
Malheureusement, la réponse proposée affecte gravement le redimensionnement du dialogue. Lorsque vous essayez de le redimensionner avec la poignée SE, la boîte de dialogue est redimensionnée sur les 4 côtés.

2
Je recommande de limiter ou de supprimer l'événement de redimensionnement. J'ai vu IE7 et IE8 déplacer la boîte de dialogue "à l'extérieur" de la fenêtre en raison de l'exécution trop fréquente du gestionnaire de redimensionnement.
BStruthers

2
Sur les versions plus récentes de l'interface utilisateur jQuery, j'avais besoin d'utiliser {my: "center", at: "center", of: window} au lieu de "center". J'utilise 1.11.0.
Mike Dotterer

20

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.


l'utilisation de la classe .ui-dialog-content est pour tous les dialogues, la réponse acceptée est pour un dialogue spécifique
Pierre

Ah, c'est vrai. Désolé. Je n'ai pas remarqué la distinction au premier coup d'œil dans l'édition.
Ellesedil

J'utilise cette approche avec succès. Il fait comme annoncé, mais le safari mobile iOS 7 étouffe vraiment si le clavier est en place. J'ai essayé de brouiller () l'entrée mais Gingerbread voit le clavier comme un événement de redimensionnement et reste coincé dans une boucle qui ne permet jamais l'entrée d'entrée. Quelqu'un d'autre face à cela?
Joseph Juhnke

Peut-être ajouter un compteur à l'extérieur .resize()et à l'intérieur si le compteur atteint 10ou 20alors break;, je n'ai pas eu ce problème, je ne réponds pas à ces périphériques / navigateurs. Vous devez essayer une solution qui, si elle est bloquée, vous pouvez en sortir
Pierre

Votre première suggestion a fonctionné et la réponse de @Ellesedil n'a pas fonctionné.
akousmata

13

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.


Cet addon / modification ne semble plus fonctionner depuis juillet 2014. La réponse de @Pierre fonctionne toujours.
dégénéré le

@degenerate: Il est possible que les mises à jour de jQuery nécessitent un peu des modifications de la syntaxe. Je ne travaille plus ni même n'ai accès au projet dans lequel j'ai implémenté cela (en fait, j'écris actuellement des API), donc je n'ai pas de moyen facile de déterminer si des modifications sont nécessaires pour les versions récentes de jQuery.
Ellesedil

Cette réponse ne fonctionne pas pour les versions récentes. Mais l'idée est géniale. Voici le contenu de mon gestionnaire de redimensionnement de fenêtre: $(".ui-dialog-content:visible").each(function () { if ($(this).dialog('option', 'autoReposition')) { $(this).dialog('option', 'position', $(this).dialog('option', 'position')); } });cela fonctionne très bien :)
nacho4d

@ nacho4d: N'hésitez pas à modifier la réponse et à ajouter le code le plus récent pour la version de jquery dans laquelle vous travaillez en bas.
Ellesedil

1
@Ellesedil Je viens de changer quelques lignes dans votre premier morceau de code. En fait, c'est ce que scott.gonzalez a écrit en premier dans le fil. Je ne sais pas pourquoi il a changé $( "#dialog" ).dialog( "option", "position" ) au $(this).data("dialog").options.positionplus tard. Quoi qu'il en soit, maintenant cette réponse fonctionne!
nacho4d

2

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
}

2

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

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

0

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

$.isVanillaJS == false
Andrew le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.