Angular UI Bootstrap-Modal-Streifen-id-und class-Attribute

Live-Beispiel

Hinzufügen der folgenden Angular UI Bootstrap Modal:

<div id="my-id" class="my-class" modal="opened">
  <p>Modal Here</p>
</div>

Ergebnisse in:

<div class="modal ng-scope">
  <p>Modal Here</p>
</div>

Warum die id und class Attribute entfernt werden?

Möchte ich einige CSS-styling auf den dialog, z.B. dialog Breite, oder einige styling-dialog der inneren Elemente. Wie könnte ich das erreichen?

  • modal ist ein convenience-Richtlinie der dialog die weit mehr Flexibilität und Optionen.
  • Ich habe versucht, zum festlegen der Breite auf eine innere div, aber das Ergebnis ist ziemlich schlecht.
InformationsquelleAutor Misha Moroshko | 2013-03-14
  1. 12

    Weil ich kam gerade über diese irritierende Problem mich und die Dokumentation und default-Verhalten ist nicht offensichtlich. Sie können nun in zusätzliche Klassen, die über die $modal.open () - Methode mithilfe des windowClass option:

    var modalInstance = $modal.open({
      templateUrl: 'templateUrl.html',
      controller: Controller,
      windowClass: 'custom-css-class',
      ...
    });

    Nicht festlegen können, eine ID-aber das ist lame. Mehr Infos in der offiziellen angular-ui-modal-docs.

    • ja. ich habe gekämpft, für Tage. schließlich ist hier die Antwort.
    • Einige Antworten machen das Leben so einfach. Kudos.
    InformationsquelleAutor standingwave
  2. 8

    Hier ist die github issue zu erklären, warum die id wird entfernt.

    Als für die Klasse, ich bin mir nicht sicher, warum beraubt, aber Sie können $dialog-Optionen um die Klasse zu definieren (das wird das Problem lösen):

    <div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}">
  <p>Modal Here</p>
</div>
    • Sieht aus wie die Einstellung dialogClass Ursachen der modal-nicht zu zeigen, bis Sie richtig: plnkr.co/Bearbeiten/PyDqFwY8ejhZVqvzjwq6?Vorschau&p=Album Vorhören. Ich denke, es ist, weil die Einstellung dialogClass entfernt die modal Klasse. Irgendwelche Ideen, wie das zu reparieren?
    • Ich denke, ich könnte dialogClass: 'modal my-class', aber es sieht ein bisschen hacky. Gibt es einen besseren Weg?
    • Yeah, ich vergaß über die modale Klasse. Kenne keine andere Art und Weise nicht verwendet haben diese zu viel.
    • Es scheint, wie diese entfernt wurde in der neusten Version von $modal, so scheint es. Ziemlich bedeutende änderung für mich ehrlich.
    • $dialog wurde entfernt: github.com/angular-ui/bootstrap/tree/master/src
    InformationsquelleAutor Stewie
Schreibe einen Kommentar