jquery diálogo de interfaz de usuario fijo de posicionamiento

Que necesitaba el cuadro de diálogo para mantener su posición fija incluso si la página se desplaza, así que he usado el
extensión en http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 pero hay 2 problemas:

  • parpadea en IE y Firefox en la página de desplazamiento (en Safari/Chrome está bien)

  • en cerrar y volver a abrir, éste pierde su stickyness y se desplaza junto con la página.

Este es el código que estoy usando para crear el cuadro de diálogo:

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

Y este es el código que estoy usando para abrirlo:

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

Sugerencias/soluciones?

Gracias

  • Si conoces algún plugin de jquery para un cuadro de diálogo que se mantiene fijo y no parpadeo, estoy interesado así
InformationsquelleAutor Sofia | 2010-04-17

14 Kommentare

  1. 43

    He probado algunas de las soluciones que se publica aquí, pero no funcionan si la página ha sido desplazado antes de que el diálogo está abierto. El problema es que se calcula la posición, sin tomar en cuenta la posición de desplazamiento, debido a que la posición es absoluta durante este cálculo.

    La solución que encontré fue la de establecer el diálogo de los padres del CSS fijo ANTES de abrir el cuadro de diálogo.

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

    Esto supone que ya se ha inicializado el diálogo con autoOpen se establece en false.

    Nota, esto no funciona si el cuadro de diálogo se puede cambiar de tamaño. Se debe inicializar con cambio de tamaño de movilidad en orden para que la posición que se mantenga fijo.

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

    Probado esta bien y no han encontrado errores hasta el momento.

    • Me parece mejor para ejecutar esta lógica en el evento, así que usted puede llamar a la norma .diálogo («abrir») en otros lugares, sin tener que ejecutar este truco cada vez que… $('#metadata').dialog({ create: function (event) { $(event.target).parent().css('position', 'fixed'); });
    • configuración de dialogClass: a una clase con position:fixed estaba trabajando en 1.8.24, pero desde 1.9.0 va fuera de la pantalla si el desplazamiento hacia abajo antes de abrir
    • Scotts respuesta funciona bien con jQuery-UI 1.11. Sólo una pequeña mejora en @Langdon comentario: el Uso de $("selector").dialog("widget") hace un poco más robusto a cambios futuros en jQuery diálogo DOM estructura. Por lo que se convierte en: $('#metadata').dialog({ create: function(event) { $(event.target).dialog("widget").css({ "position": "fixed" }); });
  2. 31

    He combinado algunas de las soluciones que se proponen en el siguiente código.
    El desplazamiento, el movimiento y cambio de tamaño funciona bien para mí en Chrome, FF y 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);
        }
    });

    Actualización:

    Si quieres hacer predeterminada para todos los cuadros de diálogo:

    $.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();
    };
    • Esta me parece ser la solución más completa, funciona muy bien, gracias.
    • por favor, retire .parent() en la sección de actualización en línea: $(event.target).parent().dialog('option','position',position);
    • esto me ha ahorrado mucho dolor! Gracias!
    • gracias!!!! utilizando una versión anterior de jquery interfaz de usuario (1.8.7). sólo me salvó soooooo mucho tiempo
    • Esto funciona bastante bien, excepto el cuadro desaparece mientras se cambia de tamaño.
    • Fija la desaparición del cuadro de problema mediante la adición de un resize evento. Ejemplo: gist.github.com/mnpenner/b214b93ab221cf93ffa0 Se utiliza subrayado/lodash del throttle para evitar que el evento de cambio de tamaño de disparo demasiado a menudo; no estoy seguro si eso es necesario.
    • Esto es genial! Sólo uno de los errores de la izquierda: al arrastrar el cuadro de diálogo hasta que la pantalla se desplaza echa a perder la posición del cuadro de diálogo. Probablemente debería desactivar el desplazamiento, mientras que el diálogo se va a mover?

  3. 9

    No podía conseguir Scott respuesta a trabajar con la interfaz de usuario jQuery 1.9.1. Mi solución es para cambiar la posición del cuadro de diálogo en una devolución de llamada desde la open evento. Primero se establece la css posición fija. A continuación, coloque el cuadro de diálogo donde usted quiera:

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

    Nota: Como se indica en otra respuesta, cambiar el tamaño del cuadro de diálogo ajustar su posición a absoluta de nuevo, así que he deshabilitado de tamaño variable.

  4. 7

    Bsed en Langdons del comentario anterior, he intentado lo siguiente, que funciona bien con jQuery-UI 1.10.0 y de tamaño variable, cuadros de diálogo:

    $('#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'); 
        }
    });
    • Esta es la única manera confiable
  5. 4

    tratar:

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

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

    • Esto asume que usted está usando jqueryui.com’s de diálogo
    • Esto no funciona si el usuario abre el cuadro de diálogo después de desplazarse. El problema con eso es que jQuery diálogo calcula el cuadro de diálogo posición relativa al desplazamiento de la ventana de desplazamiento, que no es necesario para la posición de:fijo. Voy a publicar una actualización cuando tengo que descubrió (sin bifurcaciones de la fuente).
    • Heh. Sólo en google cómo hacerlo y tengo mi propia respuesta! Extraño.
    • Acaba de publicar una solución que está muy cerca de la suya, pero corrige el bug que he descrito en mi anterior comentario.
  6. 2

    Fuerza de su cuadro de diálogo de la posición de position:fixed el uso de CSS

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

    y definir el myPosition clase css como:

    .myPosition {
        position: fixed;
    }
  7. 1
    $("#myDilog").dialog({
        create:function(){
            $(this).parent().css({position:"fixed"});
        }
    });
    • Mientras este fragmento de código se puede resolver la cuestión, , incluyendo una explicación de realmente ayuda a mejorar la calidad de tu post. Recuerde que usted está respondiendo a la pregunta para los lectores en el futuro, y esas personas pueden no saber las razones de su sugerencia de código.
  8. 0
     $('#myDialog').dialog({ dialogClass: "flora" });
            $('.flora.ui-dialog').css({ top: "8px" });

    esto mantendrá el diálogo en la parte superior de la posición no importa que se nos ha hecho clic.

  9. 0
    $('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"});

    ¿Por qué utilizar $(document).listo ? Esto podría ser un desarrollo reciente, pero funciona bien ahora.

    • Al hacer esto, se establece la propiedad css cada vez que se abre el diálogo. Si se establece en el documento listo, se establece una vez que funciona para todos los futuros abre.
  10. 0
    $( ".ui-dialog" ).css("position","fixed");  
    
    $( ".ui-dialog" ).css("top","10px");

    poner este código en la función open de diálogo

  11. 0

    Primero, crear su cuadro de diálogo. Algo como esto:

    $("#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');

    A continuación, hacer que el centro de auto con este:

        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.
  12. 0

    La solución es realmente simple. No sé si esto se aplica cuando la pregunta se la hicieron pero ahora de todos modos.

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

    Sobre «appendTo»: http://api.jqueryui.com/dialog/#option-appendTo

    Acerca de la «posición»: http://api.jqueryui.com/position/

  13. 0

    Aunque son similares a algunas de las otras respuestas anteriores, me he encontrado con que he tenido que hacer más que sólo position: fix el diálogo, pero también tenía que position: static es el contenido para mantenerlo conectado al cuadro de diálogo.

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

    Después de esto, yo podría llamar .dialog('open') en cualquier momento que yo quería y simplemente aparecen donde la dejé. La verdad es que tengo esta en una función que devolverá el cuadro de diálogo existente o crear uno nuevo según sea necesario y, a continuación, acabo de cambiar los valores del cuadro de diálogo antes de .dialog('open') se llama.

  14. 0

    Como escribí en mi blog https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/
    He encontrado un bug en «la ventana» elemento » o «diálogo» elemento».
    Cuando se crea la instancia de este widget, es salir de la ventana principal del navegador, en particular en la parte superior y la posición de la izquierda (al arrastrar o cambiar de tamaño).
    Para resolver este problema he implementado esta solución.

    Usted puede leer el código fuente a continuación:

    $(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");

    Además, cuando usted llama «$(this).window(“options”);» dentro «de la onResize» método, y el inicio de su Aplicación,
    no ves la ventana; así que debo insertar el «.la ventana(«abrir»);» en la y de la declaración de diálogo.

    Espero ayudarte.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea