jquery ui dialog

Diálogo jQuery UI adaptable(y una solución para el error maxWidth)

Question

Dado que muchos sitios aprovechan la interfaz de usuario de jQuery, hay algunas deficiencias importantes que deben superarse porque la interfaz de usuario de jQuery no es compatible con el diseño receptivo y existe un error de larga data cuando se usa maxWidth junto con width:''auto'' .

Entonces, la pregunta sigue siendo, ¿cómo hacer que jQuery UI Dialog responda?

Answer 1

A continuación se muestra cómo logré un cuadro de diálogo jQuery UI receptivo.

Para hacer esto, agregué una nueva opción a config - fluid: true , que dice que hace que el diálogo responda.

Luego tomo los eventos de cambio de tamaño y diálogo, para cambiar el ancho máximo del diálogo sobre la marcha, y reposiciono el diálogo.

Puedes verlo en acción aquí: http://codepen.io/jasonday/pen/amlqz

Revise y publique cualquier modificación o mejora.

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

Enfoque actualizado: 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
• receptivo (a la dirección anterior)
• ancho y alto de escala para responder (ej: 80% del ancho de la ventana)

Answer 2

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

Answer 3

Establecer 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");
  }
});

Answer 4

Gracias por las publicaciones! Esto me ahorró una gran cantidad de tiempo.

También me gustaría agregar, sin embargo, que estaba obteniendo un posicionamiento funky cuando el diálogo se abrió por primera vez en ciertos tamaños de pantalla. Si encuentra un error así, intente 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 le ahorre a alguien un dolor de cabeza =)

Answer 5

Gracias, esto hace que responda, pero todavía tenía un problema con el cuadro de diálogo que estaba fuera del centro b / c mi contenido (plantilla de formulario django) se estaba cargando después de que se abriera el cuadro de diálogo. Entonces, en lugar de $( "#my-modal" ).load(myurl).dialog("open" ); , Llamo $( "#my-modal" ).dialog("open" ); Luego, en el cuadro de diálogo, agrego la opción ''open'' y llamo una carga, luego su función fluidDialog() :

en las opciones de diálogo (modal, fluido, alto ... etc):

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

Answer 6

He logrado hacer un diálogo receptivo como este. Porque usar porcentaje en maxWidth parecía extraño.

var wWidth = $(window).width();
var dWidth = wWidth * 0.8;

$(''.selector'').dialog({
    height: ''auto'',
    width: ''auto'',
    create: function(){
        $(this).css(''maxWidth'', dWidth);
    }
});

Answer 7

He logrado un diálogo receptivo con el viejo

<!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">

Me gusta esto

            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''); 

Cambie el tamaño de la ventana en el resultado de JSFiddle y haga clic en "Ejecutar".

Answer 8

La solución aceptada es bastante defectuosa y superó la ingeniería imo. Se me ocurrió dialogResize que es más limpio y más directo para mis propósitos.

Implementar así:

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

Demo

Answer 9

No es necesario jQuery o Javascript. CSS resuelve todo para esto.

Esta es la solución de mi proyecto para un cuadro de diálogo jquery receptivo. Ancho y alto predeterminados, luego ancho máximo y alto para tan pequeño como el navegador se encoge. Luego tenemos flexbox para hacer que los contenidos abarquen la altura disponible.

Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/1/

EDITAR

Técnica de centrado actualizada para admitir el cambio de tamaño y el arrastre

.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;
}

Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/6/

Answer 10

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

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

Es decir, el cuadro de diálogo se abre con un ancho de 400 píxeles, a menos que el ancho de la ventana requiera un ancho menor.

No responde en el sentido de que si se reduce el ancho, el diálogo se reduce, pero responde en el sentido de que en un dispositivo específico, el diálogo no será demasiado ancho.

Answer 11

Reuní estos códigos de varias fuentes y los puse juntos. Así es como se me ocurrió un cuadro de diálogo jQuery UI receptivo. 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>

Answer 12

Si su sitio está restringido a un tamaño máximo, el siguiente método funcionará. Adjunte un estilo CSS a su 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
});

Answer 13

$("#content").dialog({
    width: ''auto'',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

Esto funcionó para mí