wie eine Seite mit jQuery UI-Dialog laden

StackOverflow https://stackoverflow.com/questions/1608249

  •  05-07-2019
  •  | 
  •  

Frage

ist, dass möglich, eine andere Seite mit jQuery UI-Dialog zu laden?

Wie Dialog + Ajax

Danke

War es hilfreich?

Lösung

Wenn Sie Inhalte in einen Dialog mit Ajax laden möchten, können Sie einfach .load $ verwenden: 

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

Hier finden Sie ein Beispiel hier .

Andere Tipps

Das Design des JQuery UI-Dialog ist so, dass es bestehende Inhalte auf den Betrieb benötigt. Typischerweise in den Beispielen ist dies ein DIV aus dem bestehenden BODY des DOM genommen.

Es gibt Fälle, obwohl, wo auf bestehende Seiten hinzufügen Markup nur um einen Dialog zu schaffen - vor allem, wenn der Inhalt durch AJAX geladen wird - führt zu Problemen. Zum Beispiel können Sie eine JavaScript-Bibliothek, die aus einer Anzahl von Seiten aufgerufen werden kann und will nicht Markup jedem von ihnen hinzuzufügen.

Eine alternative Art und Weise ( inspiriert durch diese ) ist hier:

Der Unterschied ist, dass Sie die DIV erstellen programmatisch (wird an den DOM automatisch hinzugefügt werden) - und wenn der Dialog schließt wir zerstören sie vollständig -. Und entfernen sie aus dem DOM auf dem ‚Schließen‘ Ereignis 

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

Ersetzen dialog1.load(contentUrl).dialog('open'); mit der folgenden, wenn Sie den Dialog (und möglicherweise Flimmern) zu öffnen nicht wollen, bis der Inhalt geladen wird. Dies ermöglicht es auch richtig, ohne zusätzliche Arbeit zentriert werden. 

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

Ich ziehe es zu warten, bis ich den Inhalt habe den Dialog zu erstellen. Es scheint einfacher zu mir. Auch Auto-Sizing scheint nicht anders zu arbeiten: 

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

Sicher, sind nur ein iframe in HTML Ihr Dialog ist.

Wenn Sie speziell benötigen oder wünschen ein iFrame statt injiziert Inhalte in die dom, ich habe eine Erweiterung für das hier: http://plugins.jquery.com/project/jquery-framedialog

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top