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
|
1 |
bower install bootstrap-dialog |
Pak jen vložit do HTML stránky
|
1 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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