Récemment un souci s'est posé dans un développement pour faire fonctionner une validation FormCheck dans un formulaire présenté dans une SqueezeBox.

Le contexte : Un formulaire d'inscription dans une SqueezeBox mais sans iframedont les champs sont validés par la librairie FormCheck.

Le problème : Les alertes n'étaient pas visibles.

Après analyse du code généré, il s'avère que la squeezebox est sur des z-index 65555 et 65557 alors que les alertes générées par Formcheck sont en position absolute en fin de document et sans mention du z-index.

La solution mise en oeuvre a consisté a ajouter le code suivant au css :

.fc-tbx {
    z-index: 99999;
} 

Et pour éviter que des alertes parasites restent visibles après la fermeture manuelle de la squeezebox, il suffit d'ajouter cela à son initialisation :

onClose : function () {
    $('.fc-tbx').each(function (item) {item.dispose();});
},