web-dev-qa-db-fra.com

jquery ui dialog positionnement fixe

J'avais besoin de la boîte de dialogue pour maintenir sa position fixe même si la page défilait, j'ai donc utilisé l'extension à http://forum.jquery.com/topic/dialog-position-fixed-12-1-201 = mais il y a 2 problèmes:

  • il scintille dans IE et Firefox sur le défilement de la page (dans Safari/Chrome ça va)

  • à la fermeture puis à la réouverture, il perd son adhérence et défile avec la page.

Voici le code que j'utilise pour créer la boîte de 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

jquery-uicssjquery-ui-dialog
37
Sofia

J'ai essayé certaines des solutions publiées ici, mais elles ne fonctionnent pas si la page a été défilé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 était de définir le CSS du parent de la boîte de dialogue sur 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 autoOpen défini sur false.

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

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

Testé à fond et n'a trouvé aucun bogue jusqu'à présent.

42
Scott Greenfield

J'ai combiné quelques solutions suggérées au code suivant. Le défilement, le déplacement et le redimensionnement me conviennent parfaitement 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 souhaitez définir la valeur 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();
};
31
msander

Je n'ai pas pu obtenir la réponse de Scott pour travailler avec jQuery UI 1.9.1. Ma solution consiste à repositionner la boîte de dialogue dans un rappel de l'événement open. Réglez d'abord la position css sur fixed. Positionnez ensuite 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 définira à nouveau sa position sur absol, j'ai donc désactivé redimensionnable.

9
Dag Høidahl

Basé sur Langdon's commentaire ci-dessus, j'ai essayé ce qui suit, qui fonctionne très 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'); 
    }
});
7
wolfmanx

essayer:

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

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

4
kingjeffrey

Forcer la position de votre boîte de dialogue à position:fixed en utilisant CSS

$('.selector').dialog({ dialogClass: 'myPosition' });

et définissez la classe css myPosition comme:

.myPosition {
    position: fixed;
}
2
Эџad Дьdulяңмaи
$("#myDilog").dialog({
    create:function(){
        $(this).parent().css({position:"fixed"});
    }
});
1
Blueming
$('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

Pourquoi utiliser $ (document) .ready? Cela pourrait être un développement récent, mais cela fonctionne bien maintenant.

0
heorling
 $('#myDialog').dialog({ dialogClass: "flora" });
        $('.flora.ui-dialog').css({ top: "8px" });

cela gardera la boîte de dialogue en position supérieure, peu importe où nous avons cliqué.

0
coolguy97

Comme je l'ai écrit dans mon blog https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/ J'ai trouvé un bogue dans Élément "fenêtre" ou élément "dialogue". Lorsque vous instanciez ce widget, il sort du navigateur de la fenêtre principale, en particulier en position haute et gauche (lorsque vous faites glisser ou redimensionnez-le). Pour résoudre ce problème, j'ai implémenté cette solution.

Vous pouvez lire le code source ci-dessous:

$(dialog).window({
   onMove: function(left, top) {
   if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).window('move', {left: left, top: top});
   }
},
onResize: function(width, height) {
  var opt = $(this).window("options");
  var top = opt.top;
  var left = opt.left;
  if (top < 0) {
    top = (top < 0) ? 0 : top;
    $(this).window('move', {left: left, top: top});
  }
}
}).window("open");

The same code is for dialog:

$(dialog).dialog({
  onMove: function(left, top) {
  if (left < 0 || top < 0) {
     left = (left < 0) ? 0 : left;
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
  }
},
onResize: function(width, height) {
   var opt = $(this).window("options");
   var top = opt.top;
   var left = opt.left;
   if (top < 0) {
     top = (top < 0) ? 0 : top;
     $(this).dialog('move', {left: left, top: top});
   }
}
}).dialog("open");

De plus, lorsque vous appelez "$(this).window(“options”);" dans la méthode "onResize" et démarrez votre application, vous ne voyez pas la fenêtre; donc je dois insérer le ".window (" open ");" au et de la déclaration de dialogue.

J'espère vous aider.

0
Enrico

La solution est en fait très simple. Je ne sais pas si cela s'appliquait lorsque la question a été posée, mais c'est maintenant le cas de toute façon.

//First a container/parent-div with fixed position is needed
var dialogContainer=document.body.appendChild(document.createElement("div"));
dialogContainer.style.position="fixed";
dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window


//Now whenever a dialog is to be created do it something like this:
$(myDialogContent).dialog({
    appendTo: dialogContainer,
    position: { 
        at: 'center center',
        of: dialogContainer
    }
});

À propos de "appendTo": http://api.jqueryui.com/dialog/#option-appendTo
À propos de "position": http://api.jqueryui.com/position/

0
Clox

Bien que similaire à certaines des autres réponses ci-dessus, j'ai constaté que je devais faire plus que simplement position: fix La boîte de dialogue, mais je devais aussi position: static Son contenu pour la garder attachée à la dialogue.

$('<div id="myDialog" class="myClass">myContent</div>')
        .dialog(dialogOptions)
        .parent()
        .css({ position: 'fixed' })
        .end()
        .position({ my: 'center', at: 'center', of: window })
        .css({ position: 'static' });

Après cela, je pouvais appeler .dialog('open') à tout moment et il apparaissait simplement là où je l'avais laissé. J'ai en fait cela dans une fonction qui renverra la boîte de dialogue existante ou en créera une nouvelle au besoin, puis je change simplement les valeurs de la boîte de dialogue avant d'appeler .dialog('open').

0
cjbarth

Créez d'abord votre boîte de dialogue. Quelque chose comme ça:

$("#dialog_id").dialog({
                autoOpen : false,
                modal : true,
                width: "auto",
                resizable: false,
                show: 'fade',
                hide: { effect:"drop",duration:400,direction:"up" },
                position: top,
                height: 'auto',
                title: "My awesome dialog",
                resizeStart: function(event, ui) {
                    positionDialog();
                },
                resizeStop: function(event, ui) {
                    positionDialog();
                }
            });
            $("#dialog_id").dialog('open');

Ensuite, faites-le centrer automatiquement avec ceci:

    function positionDialog (){
        setInterval(function(){
            if($("#dialog_id").dialog( "isOpen" )){
                $("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" ));
            }
        },500);
    }
//setInterval is for make it change position "smoothly"
//You can take it off and leave just the if clausule and its content inside the function positionDialog.
0
Hiro Ferreira
$( ".ui-dialog" ).css("position","fixed");  

$( ".ui-dialog" ).css("top","10px");

mettre ce code sur la fonction ouverte de dialogue

0
mohammad inanloo