web-dev-qa-db-fra.com

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 jquery UI, tout fonctionne correctement, à l'exception d'une chose .. .. Lorsque le navigateur est redimensionné, la boîte de dialogue reste dans sa position initiale, ce qui peut être très gênant.

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

Cliquez sur l'exemple "dialogue modal" et redimensionnez votre navigateur.

J'aimerais pouvoir laisser les dialogues s'auto-centrer lorsque le navigateur se redimensionne ... Est-ce que cela peut être fait de manière efficace pour tous mes dialogues dans mon application?

Merci beaucoup!

jqueryjquery-uimodal-dialog
97
Jorre

Définir l'option position forcera ceci, donc utilisez simplement le même sélecteur couvrant tous vos dialogues où j'utilise #dialog ici (s'il ne les trouve pas, aucune action n'est entreprise, comme pour tout jQuery):

jQuery UI avant 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 jQuery UI ajoutant uniquement le code ci-dessus , nous ajoutons simplement un gestionnaire à l'événement resize de la fenêtre avec .resize() , de sorte qu'il déclenche le recentrage au moment opportun . Le plus grand centre commercial

154
Nick Craver

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 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 cependant

MODIFIER:

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

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

Il n'est pas nécessaire que .each () soit utilisé si vous avez des dialogues uniques que vous ne voulez pas toucher.

19
Pierre

Une réponse plus complète, qui utilise la réponse de Nick de manière plus souple, 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'écrit définit par défaut l'option sur true. Placez ceci dans un fichier .js dans 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 un "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");
            }
        }
    });
});

Maintenant, ce dialogue se repositionnera toujours. La repositionnement automatique (ou ce que vous appelez le paramètre) peut gérer toutes les boîtes de dialogue n'ayant pas de position par défaut et les repositionner automatiquement lorsque la fenêtre est redimensionnée. Étant donné que vous définissez cette option 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 à la boîte de dialogue elle-même. Et la meilleure partie est que puisque ceci est défini par dialogue, vous pouvez faire en sorte que certains dialogues se repositionnent et que d'autres restent là où ils sont.

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

13
Ellesedil

Voici une autre option qui fonctionne uniquement avec CSS. Les marges négatives doivent être égales à la moitié de votre hauteur et de la moitié de votre largeur. Donc, dans ce cas, ma boîte de dialogue mesure 720 pixels de large sur 400 pixels 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
Kirk Ross

Vous pouvez aussi utiliser jQuery ui position ,

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

Bonjour à tous!

Solution JS à la 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 });
  }
}());
0
Alexandr Kazakov