Bootstrap dialog

Pokud píšete nějakou webovou aplikaci, určitě narazíte na potřebu něco sdělit uživateli vaší stránky formou vyskakovacího okna. K tomu vám bude asi stačit alert. Pokud ale chcete něco komplexnějšího a komplikovanějšího, protože byste chtěli například načíst nějaká data, pak potřebujete modální dialogový box.

Dříve jsem modální okna sám navrhoval v HTML a skrze Angular je obsluhoval.

Teď jsem našel skvělou knihovnu boostrap3-dialog, která tohle všechno dělá za mě a dělá toho mnohem víc.

Stačí skrze Bower naimportovat knihovnu do projektu

bower install bootstrap-dialog

Pak jen vložit do HTML stránky

script(src='js/bootstrap-dialog.js')

A pak jen na požadovaném místě zavolat s požadovanými parametry a popřípadě callback funkcí.
Jednoduché demo s několika tlačítky:

BootstrapDialog.show({
  message: 'Hi Apple!',
  buttons: [{
      label: 'Button 1'
    }, {
      label: 'Button 2',
      cssClass: 'btn-primary',
      action: function(){
        alert('Hi Orange!');
      }
    }, {
      icon: 'glyphicon glyphicon-ban-circle',
      label: 'Button 3',
      cssClass: 'btn-warning'
    }, {
      label: 'Close',
      action: function(dialogItself){
        dialogItself.close();
      }
  }]
});

Paráda, jak je to jednoduché oproti tomu, když do stránky vkládáte spoustu kódu navíc..
Demo příklady