Più popup modali Bootstrap nella stessa pagina web con CakePHP 3.x

In questa guida vedremo come risolvere un problema riccorente quando si fa ricorso all’uso di più popup modali Bootstrap nella stessa pagina web. La stessa soluzione verrà integrata in Layout CakePHP per rendere centralizzare il modale, e poterlo utilizzare in qualsiasi template in esecuzione.

Scenario

Inizialmente lo scenario prevede la presenza di una pagina web standard, configurarata per utilizzare stili e script Bootstrap, per questo motivo proponiamo la pagina di esempio presente sul sito Bootstrap getting-started, come di seguito:

Predisponiamo la pagina con il blocco in cui mandare in esecuzione il modale, ricorrendo all’esempio previsto sulla guida, nella sezione modal.js, come di seguito:

Infine introduciamo questo script che consente di svuotare il contenuto del modale centralizzato, ogni volta che viene nascosto, consentendo di visualizzare ogni volta il contenuto desiderato:

Attenzione! Senza questo script viene visualizzato sempre il primo contenuto fino a nuovo caricamento della pagina web che contiene il blocco del modale.

Ritornanndo a quello che il nostro obiettivo, ovvero l’integrazione di questa soluzione in CakePHP 3.x, vediamo come lo script principale della pagina possa essere trasformato in layout, integreremo il blocco modale e lo script nello stesso file ed infine presenteremo il template, definito esternamente per il lancio di contenuti differenti all’interno dello stesso blocco modale.

Layout

Di seguito viene presentato un esempio di layout per applicazione CakePHP, con la possibilità di disporre su tutte le pagine di un blocco modale in cui mandare in esecuzione di volta in volta il contenuto web desiderato:

Conclusioni

Questa soluzione è molto pratica, in quanto, consente di definire una pagina web che aggrega più informazioni e nella stessa prevedere una serie di bottoni che consentano mediante il modale di visualizzare i template per la modifica al volo dei contenuti, con la possibilità di ritornare alla vista aggregata dopo avere processato e salvato i dati.

Infine, giusto per completezza, viene presentato lo script HTML di esempio da utilizzare nel template CakePHP, con i bottoni che puntano a diversi link, ma che vanno in esecuzione all’interno dello stesso oggetto grafico centralizzato #myModal:

Personalmente ho trovato questa soluzione molto utile, quello che il browser non svuoti in automatico il contenuto del modale quando lo stesso viene nascosto è un problema ricorrente che è possibile risolvere con lo script presentato. Il fatto di presentare l’intero scenario è perchè spesso ricorro a tale soluzioni per risolvere il problema di di integrare più modali nella stessa vista, che facciamo di fatto azioni diverse sui dati presentati in vista aggregata.

Lascia un commento