Denis Potschien 14. Mai 2012

Bootbox.js: Dialogboxen per Bootstrap erstellen

Mit Twitters Bootstrap können die unterschiedlichsten Interface-Elemente für Webanwendungen erstellt werden. Buttons, Navigationen, Fortschrittsbalken – mit einer Mischung aus Stylesheets und JavaScript sind diese schnell eingerichtet und fertig gestaltet. Mit Bootbox.js, das auf Bootstrap aufbaut, erzeugt man passende Dialogboxen im Bootstrap-Stil.

Zwar lassen sich Dialogboxen auch ohne Bootbox.js erstellen, aber mit Boobox.js ist dies mit deutlich geringerem Aufwand verbunden. Wenige Zeilen JavaScript reichen aus.


Boots are made for walking… (Bildquelle: CFalk / pixelio.de)

Dialogboxen schnell gemacht

Will man eine Dialogbox nur mit Bootstrap realisieren, muss zunächst per HTML die Box inklusive Text und Button ausgezeichnet werden. Anschließend sind einige Zeilen JavaScript notwendig, um den HTML-Elementen die entsprechenden Funktionen zuweisen zu können. Mit Bootbox.js reicht eine einzige Zeile JavaScript aus, um eine fertige Dialogbox zu erhalten:

<script type="text/javascript>
  bootbox.alert("Dies ist eine einfache Dialogbox mit OK-Button.");
</script>


Einfacher Alert-Dialog

Damit Bootbox.js funktioniert, müssen einige JavaScript-Dateien im Header eingebunden werden. Neben der Bootbox.js müssen jQuery sowie das Modal-Plugin von Bootstrap eingebunden werden. Außerdem ist für das Aussehen der Boxen die Bootstrap-Stylesheet-Datei erforderlich:

<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>

<script type="text/javascript" src="bootbox.js"></script>

Anschließend können Dialogboxen im Body des Dokumentes aufgerufen werden. Der einfache Alert-Dialog lässt sich auch mit einem individuell beschrifteten Button versehen:

<script type="text/javascript>
  bootbox.alert("Dies ist eine einfache Dialogbox mit individuellem Button.", "Bestätigen");
</script>

Verschiedene Dialogboxen möglich

Neben einfachen Alert-Dialogen können auch Boxen mit Confirm-Dialog erstellt werden, die zum Bestätigen oder Abbrechen einer Aktion auffordern. Für beide Buttons lassen sich Funktionen übergeben, die eine entsprechende Aktion ausführen:

<script type="text/javascript>
bootbox.confirm("Seitentitel ändern?", function(result) {
  if (result) {
    document.title = "Neuer Seitentitel";
  }
});
</script>

Auch hierbei kann die Beschriftung der beiden Buttons angepasst werden:

<script type="text/javascript>
bootbox.confirm("Seitentitel ändern?", "Nein", "Ja", function(result) {
  if (result) {
    document.title = "Neuer Seitentitel";
  }
});
</script>

Jenseits der Standardmöglichkeiten sind ganz individuelle Boxen mit beliebig vielen Buttons und Aktionen denkbar. Insgesamt gibt es vier unterschiedliche Klassen von Button: „primary“ für einfache Bestätigungsbuttons (standardmäßig blau), „success“ für positive bestätigende Aktionen (grün), „danger“ für ablehnende Aktionen (rot) sowie ein einfacher Button ohne besondere Hervorhebung.

Jedem Button lässt sich eine Klasse, eine Beschriftung sowie eine Funktion zuweisen:

<script>
bootbox.dialog("Ich möchte …", [
  {
    "label" : "Dr. Web besuchen",
    "class" : "btn-success",
    "callback": function() {
      location.href = "http://www.drweb.de/";
    }
  }, {
    "label" : "Google besuchen",
    "class" : "btn-danger",
    "callback": function() {
      location.href = "http://www.google.de/";
    }
  }, {
    "label" : "Abbrechen"
  }
]);
</script>


Individuelle Dialogbox

Wer das Layout der Dialogboxen anpassen möchte, sollte sich mit der „bootstrap.css“ auseinandersetzen. Dort ist das Layout für alle per Bootstrap erzeugten Interface-Elemente, inklusive der mit Bootbox.js erstellten Dialogboxen enthalten.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück