dialogue de l'interface utilisateur jquery à positionnement fixe

Question

J'avais besoin que le dialogue maintienne sa position fixe même si la page défilait, j'ai donc utilisé l'extension de l'extension http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 mais il y a 2 problèmes avec ça :

• il clignote dans IE et Firefox lors du défilement de la page (dans Safari/Chrome, il n'y a pas de problème).

• en fermant puis en rouvrant, il perd son adhérence et défile avec la page.

Voici le code que j'utilise pour créer le dialogue :

$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>')
                .dialog({
                autoOpen: true,
                title: user_str,
                height: 200,
                stack: true,
                sticky: true //uses ui dialog extension to keep it fixed
     });

Et voici le code que j'utilise pour le rouvrir :

jQuery('#'+divpm_id).parent().css('display','block');

Suggestions/solutions ?

Merci

Answer 1

J'ai essayé certaines des solutions proposées ici, mais elles ne fonctionnent pas si la page a été déroulée avant l'ouverture de la boîte de dialogue. Le problème est qu'il calcule la position sans tenir compte de la position de défilement, car la position est absolue lors de ce calcul.

La solution que j'ai trouvée est de définir la CSS du parent de la boîte de dialogue comme étant fixe AVANT d'ouvrir la boîte de dialogue.

$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');

Cela suppose que vous avez déjà initialisé la boîte de dialogue avec la valeur false pour autoOpen.

Attention, cela ne fonctionne pas si la boîte de dialogue est redimensionnable. Elle doit être initialisée avec le redimensionnement désactivé pour que la position reste fixe.

$('#my-dialog').dialog({ autoOpen: false, resizable: false });

J'ai testé ce système de manière approfondie et je n'ai trouvé aucun bogue jusqu'à présent.

Answer 2

J'ai combiné quelques solutions suggérées au code suivant. Le défilement, le déplacement et le redimensionnement fonctionnent bien pour moi dans Chrome, FF et IE9.

$(dlg).dialog({
    create: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
    },
    resizeStop: function(event, ui) {
        var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                         (Math.floor(ui.position.top) - $(window).scrollTop())];
        $(event.target).parent().css('position', 'fixed');
        $(dlg).dialog('option','position',position);
    }
});

---

Mise à jour :

Si vous voulez le rendre par défaut pour toutes les boîtes de dialogue :

$.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    $(this.element).parent().css('position', 'fixed');
    $(this.element).dialog("option",{
        resizeStop: function(event,ui) {
            var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()),
                            (Math.floor(ui.position.top) - $(window).scrollTop())];
            $(event.target).parent().css('position', 'fixed');
            // $(event.target).parent().dialog('option','position',position);
            // removed parent() according to hai's comment (I didn't test it)
            $(event.target).dialog('option','position',position);
            return true;
        }
    });
    this._oldinit();
};

Answer 3

Je n'ai pas réussi à faire fonctionner la réponse de Scott avec jQuery UI 1.9.1. Ma solution consiste à repositionner la boîte de dialogue dans un callback de la fonction open événement. D'abord, définissez la position css sur fixe. Ensuite, positionnez la boîte de dialogue où vous le souhaitez :

$('selector').dialog({
    autoOpen: false,
    open: function(event, ui) {
        $(event.target).dialog('widget')
            .css({ position: 'fixed' })
            .position({ my: 'center', at: 'center', of: window });
    },
    resizable: false
});

Remarque : comme indiqué dans une autre réponse, le redimensionnement de la boîte de dialogue entraîne la modification de sa position. absolu à nouveau, j'ai donc désactivé redimensionnable .

Answer 4

Bsed on Langdons ci-dessus, j'ai essayé ce qui suit, qui fonctionne bien avec jQuery-UI 1.10.0 et les boîtes de dialogue redimensionnables :

$('#metadata').dialog(
{
    create: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStart: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    },
    resizeStop: function (event) {
    $(event.target).parent().css('position', 'fixed'); 
    }
});

Answer 5

Essayez :

$(document).ready(function() {
  $('#myDialog').dialog({dialogClass: "flora"});
  $('.flora.ui-dialog').css({position:"fixed"});
)};

(de http://dev.jqueryui.com/ticket/2848 )