Con muchos sitios de aprovechamiento de jQuery UI, allí están algunas de las principales deficiencias que deben ser superados porque jQuery interfaz de usuario no soporte el diseño sensible y hay una larga error cuando maxWidth se utiliza en conjunción con width:'auto'.

Así que la pregunta sigue siendo, ¿cómo hacer de interfaz de usuario jQuery Diálogo sensible?

InformationsquelleAutor Jason | 2013-05-09

13 Comentarios

  1. 63

    A continuación es cómo he conseguido un responsive jQuery UI Dialog.

    Para ello, he añadido una nueva opción para la configuración de fluid: true, que dice que para hacer el cuadro de diálogo sensible.

    Yo, a continuación, coger el cambio de tamaño y de diálogo abierto de eventos, para cambiar el ancho máximo del diálogo sobre la marcha, y la posición del cuadro de diálogo.

    Se puede ver en acción aquí: http://codepen.io/jasonday/pen/amlqz

    Por favor, revisar y publicar las modificaciones o mejoras.

    //Demo: http://codepen.io/jasonday/pen/amlqz
    //[email protected]
    
    $("#content").dialog({
        width: 'auto', //overcomes width:'auto' and maxWidth bug
        maxWidth: 600,
        height: 'auto',
        modal: true,
        fluid: true, //new option
        resizable: false
    });
    
    
    //on window resize run function
    $(window).resize(function () {
        fluidDialog();
    });
    
    //catch dialog if opened within a viewport smaller than the dialog width
    $(document).on("dialogopen", ".ui-dialog", function (event, ui) {
        fluidDialog();
    });
    
    function fluidDialog() {
        var $visible = $(".ui-dialog:visible");
        //each open dialog
        $visible.each(function () {
            var $this = $(this);
            var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
            //if fluid option == true
            if (dialog.options.fluid) {
                var wWidth = $(window).width();
                //check window width against dialog width
                if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
                    //keep dialog from filling entire screen
                    $this.css("max-width", "90%");
                } else {
                    //fix maxWidth bug
                    $this.css("max-width", dialog.options.maxWidth + "px");
                }
                //reposition dialog
                dialog.option("position", dialog.options.position);
            }
        });
    
    }

    EDITAR

    Aproximación actualizada:
    https://github.com/jasonday/jQuery-UI-Dialog-extended

    El repositorio anterior también incluye opciones para:

    • Haga clic fuera del cuadro de diálogo para cerrar
    • Ocultar barra de título
    • ocultar botón cerrar
    • sensible (a la dirección arriba)
    • ancho de escala & altura para la respuesta (por ejemplo: el 80% de la anchura de la ventana)
    • Muchas gracias por esto! El ancho de auto, maxwidth error ha sido una gran molestia!
    • Quizás vale la pena señalar que fluidDialog también podría ser llamado de diálogo abrir: para asegurarse de que ancho:’auto’ + maxWidth:www ambos son respetados inmediatamente después de abrir el cuadro de diálogo sin ningún tipo de ventana de cambio de tamaño.
    • El otro bit puede ser modificado fácilmente para hacer cumplir un minWidth demasiado. $this.css("min-width",dialog.options.minWidth + 'px')
    • He probado este, pero no funcionó. Es porque estoy usando javascript gumby?
    • Probablemente no, porque te tienen que cambiar esta línea: var dialog = $this.find(".ui-dialog-content").data("ui-dialog"), a var dialog = $this.find(".ui-dialog-content").data("dialog") //.de datos(‘diálogo’) en lugar de .de datos(‘ui-dialog»).
    • eso depende de qué versión de jQuery interfaz de usuario que está utilizando. Se ha cambiado la opción de datos para el diálogo a través de la prensa.
    • He editado la respuesta a sacar el líquido «en la opción» ya no es más una opción de acuerdo a api.jqueryui.com/dialog, sin embargo veo que otra gran parte de la respuesta debe ser editado en consecuencia, como bien ya que se basa en esta propiedad. Por ahora acabo de revertir esto.
    • nunca fue parte de la api. fluid era una opción que me estaba sumando.
    • Impresionante @Jason, gracias montones compañero!!!
    • es el código fuente disponible en algún sitio?
    • siga el enlace de github en mi respuesta. He creado un plugin para ampliar jQuery interfaz de usuario cuadro de Diálogo con más opciones, incluyendo haga clic fuera de la manipulación, etc.
    • Este debe tener el «clic fuera» configurado para que no cierre por defecto para mantener el comportamiento anterior, sin forzar una opción para configurar.
    • impresionante es , puede usted por favor me diga cómo hacer un área de texto en mvc sensible ? Tuve intenta todas las soluciones pero ninguna de esas trabajado para mí
    • ^1 Genial!!! me ayudó demasiado
    • de niza. en lugar de tener una función que llama a otra función, usted puede: // cambio de tamaño del cambio de tamaño de ventana $(window).en (redimensionar, cambiar el tamaño);
    • Este es el buggy especialmente al cambiar el tamaño del cuadro de diálogo y, a continuación, la ventana. He publicado una solución alternativa.
    • No me sorprende, ya que no he actualizado en mucho tiempo y estoy seguro de que hay conflictos con las nuevas versiones de jQuery. Como siempre, las personas son bienvenidas a abrir pull requests con las actualizaciones y espero que l tener un poco de tiempo para mirar a mí mismo.
    • Habría creado un PR que si no era tan imperfecto! No me refiero a ser dura, pero se me pasó algún tiempo tratando de solucionarlo antes de ir con una reescritura que terminó por ser más simple, más elegante, más estable y una solución de limpieza.

  2. 34

    Configuración maxWidth en create funciona bien:

    $( ".selector" ).dialog({
      width: "auto",
      //maxWidth: 660, //This won't work
      create: function( event, ui ) {
        //Set maxWidth
        $(this).css("maxWidth", "660px");
      }
    });
    • Funciona a la perfección. Gracias.
  3. 8

    Sin necesidad de jQuery o Javascript. CSS resuelve todo por esta.

    Este es mi proyecto de solución para una capacidad de respuesta cuadro de diálogo jquery. Por defecto anchura y la altura, la anchura máxima y la altura de tan pequeño como el navegador se encoge. Entonces tenemos flexbox a causa de los contenidos para abarcar la altura disponible.

    el Violín: http://jsfiddle.net/iausallc/y7ja52dq/1/

    EDITAR

    Actualizado centrado técnica para apoyar el cambio de tamaño y arrastrando

    .ui-dialog {
        z-index:1000000000;
        top: 0; left: 0;
        margin: auto;
        position: fixed;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .ui-dialog .ui-dialog-content {
        flex: 1;
    }

    Violín:
    http://jsfiddle.net/iausallc/y7ja52dq/6/

    • Problemática en IE < 10. Flex – caniuse.com/#search=flex
    • He probado este enfoque. Se logró que el diálogo sensible, pero impide la posibilidad de arrastrar y de tamaño variable.
    • gracias por señalarlo. Por favor, consulte la EDICIÓN
    • He probado la versión revisada. La versión anterior (con problemas) cambiar de tamaño dinámicamente como ha cambiado el tamaño de la ventana del navegador. Pero sólo era sensible con respecto a la evolución de la ventana y, a continuación, la recarga. Uno podría hacer un buen caso de que esta es suficiente, porque los usuarios no cambiar el tamaño de su dispositivo; sólo los desarrolladores de prueba por cambiar dinámicamente el ancho del navegador. Sin embargo, si esa es la meta, mi solución a continuación es aún más simple, mediante el uso de ancho de: Matemáticas.min(400, $(window).width() * .8). En este punto, estoy tiende a ir por el dinamismo de la solución dada a la respuesta de arriba (fluidDialog).
    • Me gustó esta solución mucho porque sólo requiere un trozo de CSS. Funcionó a la perfección para mí, y aunque también me gustaba la siguiente solución, esta fue la primera que he intentado y una vez que trabajó, estoy vendido.
  4. 6

    He reunido estos códigos a partir de varias fuentes y los puse juntos. Esta es la forma en que se me ocurrió con un responsive jQuery interfaz de usuario cuadro de Diálogo. Espero que esto ayude..

    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>jQuery UI Dialog - Modal message</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(document).ready(function() {
    $("#dialog-message").dialog({
    modal: true,
    height: 'auto',
    width: $(window).width() > 600 ? 600 : 'auto', //sets the initial size of the dialog box 
    fluid: true,
    resizable: false,
    autoOpen: true,
    buttons: {
    Ok: function() {
    $(this).dialog("close");
    }
    }
    });
    $(".ui-dialog-titlebar-close").hide();
    });
    $(window).resize(function() {
    $("#dialog-message").dialog("option", "position", "center"); //places the dialog box at the center
    $("#dialog-message").dialog({
    width: $(window).width() > 600 ? 600 : 'auto', //resizes the dialog box as the window is resized
    });
    });
    </script>
    </head>
    <body>
    <div id="dialog-message" title="Responsive jQuery UI Dialog">
    <p style="font-size:12px"><b>Lorem Ipsum</b></p>
    <p style="font-size:12px">Lorem ipsum dolor sit amet, consectetur 
    adipiscing elit. Quisque sagittis eu turpis at luctus. Quisque   
    consectetur ac ex nec volutpat. Vivamus est lacus, mollis vitae urna 
    vitae, semper aliquam ante. In augue arcu, facilisis ac ultricies ut, 
    sollicitudin vitae  tortor. 
    </p>
    </div>
    </body>
    </html>
  5. 3

    He logrado una sensible diálogo con los viejos

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    como este

                var dWidth = $(window).width() * 0.9;
    var dHeight = $(window).height() * 0.9; 
    $('#dialogMap').dialog({
    autoOpen: false,
    resizable: false,
    draggable: false,
    closeOnEscape: true,
    stack: true,
    zIndex: 10000,
    width: dWidth,
    height: dHeight,    
    modal: true,
    open:function () {          
    }
    });
    $('#dialogMap').dialog('open'); 

    Cambiar el tamaño de la ventana en JSFiddle resultado y haga clic en «Ejecutar».

  6. 3

    No estoy seguro de que mi simple solución resuelve el problema de esta pregunta, pero funciona para lo que yo estoy tratando de hacer:

    $('#dialog').dialog(
    {
    autoOpen: true,
    width: Math.min(400, $(window).width() * .8),
    modal: true,
    draggable: true,
    resizable: false,
    });

    Que es, abre el cuadro de diálogo con un 400px de ancho, a menos que el ancho de la ventana requiere un ancho menor.

    Que no responde en el sentido de que si el ancho es reducido el cuadro de diálogo se contrae, pero sensible en el sentido de que en un dispositivo específico, el diálogo no será demasiado amplia.

    • Perfecto. Corto ‘n dulce, no dinámico, pero yo no necesito eso. Gracias!
  7. 2

    Si su sitio está restringido a un máximo de tamaño, a continuación, debajo de enfoque.
    Adjuntar un estilo css a su cuadro de diálogo.

    .alert{
    margin: 0 auto;
    max-width: 840px;
    min-width: 250px;
    width: 80% !important;
    left: 0 !important;
    right: 0 !important;
    }
    $('#divDialog').dialog({
    autoOpen: false,
    draggable: true,
    resizable: true,
    dialogClass: "alert",
    modal: true
    });
    • He probado este enfoque. Me funciona más suave que iautomation para la respuesta. Sin embargo, la posibilidad de arrastrar y de tamaño variable, sólo trabajar en vertical. Arrastrando horizontalmente no funciona, y el cambio de tamaño horizontal deja el cuadro de diálogo en la misma dimensión, pero cambia el tamaño del contenido sólo.
  8. 2
    $("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
    //Set max-width
    $(this).parent().css("maxWidth", "600px");
    }
    });

    Esto Funcionó para mí

  9. 1

    Me las he arreglado para hacer sensible cuadro de diálogo como este. Debido a que el uso por ciento en maxWidth miró raro.

    var wWidth = $(window).width();
    var dWidth = wWidth * 0.8;
    $('.selector').dialog({
    height: 'auto',
    width: 'auto',
    create: function(){
    $(this).css('maxWidth', dWidth);
    }
    });
  10. 1

    Acabo de encontrar una solución para este problema.

    Pegué mi estilo css, espero que esto pueda ayudar a alguien

    .ui-dialog{
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    padding: rem-calc(15);
    border: 1px solid #d3dbe2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: rem-calc(620);
    top: rem-calc(100) !important;
    margin: 0 auto;
    width: calc(100% - 20px) !important;
    }
  11. 0

    Gracias por los mensajes! Esto me salvó de una gran cantidad de tiempo.

    También me gustaría añadir, sin embargo, que yo estaba recibiendo un poco de funky posicionamiento cuando el diálogo se abrió en ciertos tamaños de pantalla. Si usted encuentra un error, trate de hacer algo como esto:

    if (wWidth < dialog.options.maxWidth + 50) {
    //keep dialog from filling entire screen
    $this.css("max-width", "90%");
    //ADDED
    $this.css("left", "5%");
    } else {
    //fix maxWidth bug
    $this.css("max-width", dialog.options.maxWidth);
    //ADDED
    var mLeft = (wWidth - dialog.options.maxWidth) / 2;
    $this.css("left", mLeft + "px");
    }

    Esperemos que esto ahorra a alguien un dolor de cabeza =)

  12. 0

    Gracias, esto hace que responde, pero yo todavía tenía un problema con el cuadro de diálogo offcenter b/c de mi contenido (django plantilla de formulario) fue despues de cargar el cuadro de diálogo abierto. Así que en Lugar de $( "#my-modal" ).load(myurl).dialog("open" );, que yo llamo $( "#my-modal" ).dialog("open" );, a Continuación, en el cuadro de diálogo agregar la opción 'open' y llamar a una carga, su fluidDialog() función:

    en el cuadro de diálogo opciones (modal, líquido, altura, etc..):

    open: function () {
    //call LOAD after open
    $("#edit-profile-modal").load(urlvar, function() {
    //call fluid dialog AFTER load
    fluidDialog();
    });
  13. 0

    La aceptación de la solución es bastante buggy y overengineered de la omi. Se me ocurrió dialogResize que es más limpio y más sencillo para mis propósitos.

    Implementar así:

    $("#dialog").dialogResize({
    width: 600,
    height: 400,
    autoOpen: true,
    modal: true
    });

    Demo

Dejar respuesta

Please enter your comment!
Please enter your name here