Ich erstelle ein Modal:
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
});
Gibt es eine Möglichkeit, die Breite zu erhöhen?
angularjs
angular-ui-bootstrap
Ivan Bacher
quelle
quelle
Antworten:
Ich benutze eine CSS-Klasse wie diese, um auf die Modal-Dialog-Klasse abzuzielen:
Stellen Sie dann in der Steuerung, die das modale Fenster aufruft, die windowClass ein:
quelle
.modal-dialog
Eine andere einfache Möglichkeit besteht darin, zwei vorgefertigte Größen zu verwenden und diese als Parameter zu übergeben, wenn Sie die Funktion in Ihrem HTML aufrufen. Verwenden Sie: 'lg' für große Modale mit einer Breite von 900px. 'sm' für kleine Modale mit einer Breite von 300px. Wenn Sie keinen Parameter übergeben, verwenden Sie die Standardgröße 600px.
Beispielcode:
und im HTML würde ich so etwas wie das folgende verwenden:
quelle
Sie können die benutzerdefinierte Breite für die .modal-lg-Klasse speziell für Ihr Popup angeben, um eine größere Auflösung des Ansichtsfensters zu erzielen. So geht's:
CSS:
JS:
quelle
Wenn wir ein Modal öffnen, akzeptiert es die Größe als Parameter:
Mögliche Werte für die Größe:
sm, md, lg
HTML:
Wenn Sie eine bestimmte Größe wünschen, fügen Sie dem Modell-HTML einen Stil hinzu:
quelle
Es gibt eine andere Möglichkeit, uibModal-Klassen nicht zu überschreiben und bei Bedarf zu verwenden: Sie rufen die Funktion $ uibModal.open mit Ihrem eigenen Größentyp wie "xlg" auf und definieren dann eine Klasse mit dem Namen "modal-xlg" wie unten ::
Rufen Sie $ uibModal.open auf als:
und das wird funktionieren. Denn jede Zeichenfolge, die Sie als Bootstrap-Größe übergeben, wird mit "modal-" versehen, und dies spielt die Rolle der Klasse für das Fenster.
quelle
Ich fand es einfacher, einfach die Vorlage von Bootstrap-ui zu übernehmen. Ich habe den kommentierten HTML-Code noch an Ort und Stelle belassen, um zu zeigen, was ich geändert habe.
Überschreiben Sie die Standardvorlage:
Ändern Sie Ihre Dialogvorlage (beachten Sie die Wrapper-DIVs, die die Klassen "Modal-Dialog" und "Modal-Content" enthalten):
Rufen Sie dann das Modal mit den CSS-Klassen- oder Stilparametern auf, die Sie ändern möchten (vorausgesetzt, Sie haben "app" bereits an einer anderen Stelle definiert):
Fügen Sie einen "Öffnen" -Button hinzu und feuern Sie ab.
Jetzt können Sie jede gewünschte zusätzliche Klasse hinzufügen oder einfach die Breite / Höhe nach Bedarf ändern.
Ich habe es weiter in eine Wrapper-Direktive aufgenommen, die von diesem Punkt an trivial sein sollte.
Prost.
quelle
Ich habe das Problem mit der Dmitry Komin-Lösung gelöst, aber mit einer anderen CSS-Syntax, damit es direkt im Browser funktioniert.
CSS
JS ist das gleiche:
quelle
quelle
Wenn Sie nur die Standardgröße verwenden möchten, können Sie 'modal-lg' hinzufügen:
quelle
Verwenden Sie die maximale Breite im Modaldialog für Winkel 5
und benutze windowClass wie von anderen empfohlen, TS zB:
Außerdem musste ich den CSS-Code in Global Styles> styles.css einfügen.
quelle