Piemonte Lab

Esperienze di programmazione

Bootbox: alert, confirm e finestre modali (dialog) customizzabili per bootstrap.

Questo è il link ufficiale del progetto javascript: http://bootboxjs.com/

Necessita di jquery e bootstrap.

Un po' di codice:

- Nell'head dell'html

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

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

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

<link href="css/bootstrap.min.css" rel="stylesheet">

(naturalmente nella cartella js metteremo i tre file js e nella cartella css il file css di bootstrap).

 

Codice javascript:

bootbox.alert("Messaggio",function(){

//Qui c'è la funzione eventuale che verrà scatenata dopo il click sull'ok, o dopo la chiusura della finestra modale.

}


oppure:

bootbox.confirm("Domanda",function(result){

  if(result){

     //se hai premuto 'si', result varrà true.

 });


La stessa cosa avviene per prompt (finestra con textbox) e per le finestre modali customizzabili, in cui posso decidere stile, attributi e callback della finestra).

Per definire invece lo stile dei bottoni occorre settare nel css le proprietà:

".modal-footer .btn-default" e ".modal-footer .btn-primary"



Nella versione utilizzabile con bootsrap 3 c'è un errore: viene rimossa la scrollbar verticale dopo la comparsa della finestra modale (perché viene aggiunta al body la proprietà '.modal-open')

Per risolvere questo inconveniente occorre settare nel css:

body {overflow-y:scroll !important}