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