it-swarm.com.de

Responsive jQuery UI-Dialog (und ein Fix für den maxWidth-Fehler)

Da viele Websites die jQuery-Benutzeroberfläche nutzen, gibt es einige schwerwiegende Nachteile, die behoben werden müssen, da die jQuery-Benutzeroberfläche kein responsives Design unterstützt und es einen langjährigen Fehler gibt, wenn maxWidth in Verbindung mit width:'auto' verwendet wird.

Es bleibt also die Frage, wie man jQuery UI Dialog ansprechbar macht.

37
Jason

Nachfolgend wird beschrieben, wie ich einen ansprechenden jQuery-UI-Dialog erstellt habe.

Zu diesem Zweck habe ich der config - fluid: true eine neue Option hinzugefügt, die besagt, dass der Dialog ansprechend sein soll. 

Ich fange dann die Ereignisse zum Ändern der Größe und zum Öffnen des Dialogfelds ein, um die maximale Breite des Dialogfelds im laufenden Betrieb zu ändern und das Dialogfeld neu zu positionieren.

Sie können es hier in Aktion sehen: http://codepen.io/jasonday/pen/amlqz

Bitte überprüfen und veröffentlichen Sie alle Änderungen oder Verbesserungen.

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

}

EDIT

Aktualisierter Ansatz: https://github.com/jasonday/jQuery-UI-Dialog-extended

Das obige Repository enthält auch Optionen für:

  • Klicken Sie außerhalb des Dialogs, um das Fenster zu schließen
  • Titelleiste ausblenden
  • schließen Sie die Schließen-Schaltfläche
  • ansprechbar (an Adresse oben)
  • skalenbreite und -höhe für Responsive (Beispiel: 80% der Fensterbreite)
62
Jason

Die Einstellung von maxWidth auf create funktioniert einwandfrei:

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
32
tsi

Keine Notwendigkeit für jQuery oder Javascript. CSS löst alles dafür.

Dies ist meine Projektlösung für ein responsives Jquery-Dialogfeld. Standardbreite und -höhe, dann max. Breite und Höhe für den Umfang, in dem der Browser verkleinert wird. Dann haben wir eine Flexbox, um zu bewirken, dass der Inhalt die verfügbare Höhe umfasst.

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

EDIT

Die Zentriertechnik wurde aktualisiert, um die Größenänderung und das Ziehen zu unterstützen

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

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

7
iautomation

Ich habe diese Codes aus verschiedenen Quellen zusammengetragen und zusammengestellt. So kam ich zu einem responsiven jQuery-UI-Dialog. Hoffe das hilft..

<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>
6
gracia16

Ich bin nicht sicher, dass meine einfache Lösung das Problem dieser Frage löst, aber es funktioniert für das, was ich versuche:

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

Das heißt, der Dialog wird mit einer Breite von 400 Pixeln geöffnet, es sei denn, die Breite des Fensters erfordert eine geringere Breite.

Nicht ansprechend in dem Sinne, dass der Dialog kleiner wird, wenn die Breite verringert wird, aber in dem Sinne, dass auf einem bestimmten Gerät der Dialog nicht zu breit ist.

3
Jeffrey Simon

Ich habe es geschafft, mit alten

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

so was

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

Ändern Sie die Größe des Fensters auf JSFiddle result und klicken Sie auf "Ausführen". 

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

Das hat für mich funktioniert

2
Himalaya Garg

Wenn Ihre Site auf eine maximale Größe beschränkt ist, funktioniert der folgende Ansatz.

.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
});
2
kiranutt

Ich habe gerade eine Lösung für dieses Problem gefunden.

Ich habe meinen CSS-Stil eingefügt, ich hoffe, das kann jemandem helfen

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

Ich habe es geschafft, so zu reagieren. Weil Verwendung von Prozent auf maxWidth seltsam aussah.

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

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

Vielen Dank, das macht ansprechend, aber ich hatte immer noch ein Problem mit dem Dialog außerhalb von CenterC/C, und mein Inhalt (Django-Formularvorlage) wurde geladen, nachdem der Dialog geöffnet wurde. Anstelle von $( "#my-modal" ).load(myurl).dialog("open" ); rufe ich $( "#my-modal" ).dialog("open" ); auf. Dann füge ich im Dialog die Option 'open' hinzu und rufe eine load und dann Ihre fluidDialog()-Funktion auf: 

in den Dialogoptionen (modal, fluid, height..etc):

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

Danke für die Beiträge! Das hat mir viel Zeit gespart. 

Ich möchte aber auch hinzufügen, dass ich beim ersten Öffnen des Dialogs auf bestimmten Bildschirmgrößen etwas funky positionierte. Wenn Sie einen solchen Fehler feststellen, versuchen Sie Folgendes:

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

Hoffentlich erspart sich jemand Kopfschmerzen =)

0
Chandler Zwolle

Die akzeptierte Lösung ist ziemlich fehlerhaft und überarbeitet imo. Ich kam mit dialog Resize das ist sauberer und unkomplizierter für meine Zwecke.

Implementiere wie folgt:

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

Demo

0
Adam Jimenez