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}

centrare in orizzontale e verticale un'immagine all'interno di un div con css

Un problema che si presenta sovente nel web è quello di centrare verticalmente e orizzontalmente un'immagine all'interno di un div con dimensioni specifiche, senza però conoscere dimensioni né orientamento dell'immagine.

Questa operazione si può fare semplicemente mediante css:

Prima di tutto occorre rinchiudere l'immagine in tre div (questo per avere una soluzione totalmente cross browser), quindi avremo una struttura tipo:

<div id="esterno">

  <div id="mezzo">

    <div id="interno">

      <img />

    <div>

  <div>

<div>

 All'immagine occorre dare il percorso dell'immagine, sia essa orizzontale, verticale o quadrata è indifferente, essa rimarrà centrata in orizzontale e in verticale rispetto al div che abbiam chiamato 'esterno'.

Questo è invece il codice css:

#esterno{
 width: 150px; height: 100px; overflow: hidden; padding-right: 20px; padding-left: 20px; margin-top: 25px; float: left; position: relative;
}
#esterno img {
 max-height: 100px; max-width: 150px;
}
#mezzo {
 width: 150px; height: 100px; text-align: center; vertical-align: middle; display: block; position: absolute;
}
#interno {
 width: 150px; height: 100px; text-align: center; vertical-align: middle; display: table-cell;
}

In questo modo per esempio otterremo un div esterno con le sue caratteristiche (questo per esempio è flottante a sinistra e ha dei margini).

Avremo inoltre dei div interni con dimensioni fisse e un'immagine con dimensioni massime definite, in modo che indipendentemente da dimensioni e orientamento dell'immagine, questa risulterà sempre centrata rispetto al div esterno.