Bootbox Änderung Titel css

Question

Für mein Projekt möchte ich verschiedene Pop-ups für verschiedene Zwecke. Also habe ich eine neue CSS-Klasse erstellt. Jetzt möchte ich den Stil der Titelkomponente (wie unten gezeigt) genauso ändern, wie ich die Knöpfe geändert habe.

Also meine Frage ist: Kann ich die CSS des Titels auf die gleiche Weise ändern, wie ich die CSS der Tasten ändern? Mit der className Eigenschaft. Wie soll ich das tun?

bootbox.dialog({ 
    message: "<h4>" + errorMessage + "<h4>", 
    title: $filter("translate")("Warning"), 
    buttons: { 
     no: { 
      label: $filter("translate")("Cancel"), 
      className: "c-btn-declined-selection c-btn-global-warning", 
      callback: noCallback 
     }, 
     yes: { 
      label: $filter("translate")("Confirm"), 
      className: "c-btn-confirm-selection c-btn-global-warning", 
      callback: yesCallback 
     } 
    } 

Answer 1

Aus dem Lesen der Bootbox.js documentation scheint es, dass eine inhärente Titel-Styling-Methode nicht existiert. Dies lässt Sie mit zwei Optionen ...

---

1. Fügen Sie die Art/Klasse in-line:

bootbox.dialog({ 
    //... 
    title: "<span style='color: red;'>This title is red</span>", 
    //... 
}) 

bootbox.dialog({ 
    //... 
    title: "<span class="redText">This title is red</span>", 
    //... 
}) 

---

2. Manipulieren der erzeugten Elemente manuell

Klicken Sie mit der rechten Maustaste auf den Bootbox-Dialog auf der Seite und gehen Sie zu Inspect Element. Von hier aus sehen Sie den generierten Inhalt einschließlich der Klassen und Elemente, von denen Sie einfach einige grundlegende CSS-Regeln verwenden können, um sie zu stylen.

Zum Beispiel, wenn das Popup-HTML sah wie folgt aus ...

<div class='bootbox-popup'> 
    <h4 class='popup-title'></h4> 
    <div class='popup-body'> ... </div> 
</div> 

Sie es mit so etwas wie Stil könnte:

h4.popup-title { 
    color: red; 
}