Fare un finto popup con Javascript (e sopravvivere)

In questi giorni mi son trovato ad affrontare, in ufficio, un simpatico problemino: avevo la necessità di inserire una serie di messaggi in una pagina web, attivati da particolari condizioni. Si tratta per la precisione di un form da compilare, contenente alcuni campi con vincoli piuttosto “astratti”, cioè non matematicamente definibili. Ad esempio, è necessario segnalare all’utente che una particolare data che gli è richiesto di inserire nel form non può essere troppo vicina ad un’altra, ma quest’altra non è precisamente definita.. insomma, un bel casino.

La cosa più semplice sarebbe stata quella di attivare, attraverso Javascript, delle semplici finestre usando la funzione alert(). Mmm… troppo banale, e poi avevo la necessità di inserire dentro ai messaggi alcuni sciccherie, ad esempio checkbox con la temutissima scritta “Dichiaro di aver letto le condizioni e mi assumo ogni responsabilità, congiuntamente ad ogni possibile enciclopedia allegata”.

Così mi son messo sotto con Javascript, che ahimè conosco ancora molto poco, ed ho cercato di cavarne fuori qualcosa di semplice, flessibile, ma soprattutto cross-browser…
Ecco cosa ne è uscito:

• Anzitutto una bella funzioncina capace di mostrare/nascondere un div
  function ShowHide(id,position){
if(document.getElementById){
var el=document.getElementById(id);
el.style.display = (el.style.display=="block") ? "none" : "block";
}
if(position=="center"){
el.style.top = document.body.scrollTop+100+'px';
el.style.margin = 'auto';
}else{
el.style.height = document.body.scrollHeight;
}
}
  Si noti che in questo modo i div per i quali sarà richiesto il valore “center” per l’opzione “position” saranno automagicamente portati a 100px dal bordo superiore della finestra.
• Poi un’altra funzione che richiama la precedente indicando quali siano i div da far apparire e sparire…
  function AlertFakeWindow(id){
ShowHide(id,'center');
ShowHide('obtenebration','');
}
• Alle due funzioni si aggiunga che nel documento dove le si vuole applicare devono esistere:
  1. Un div con id “obtenebration” (sì, è in qualche modo un tributo alla White Wolf e ai Lasombra…), che a sua volta conterrà un particolare iframe:
     <div id=”obtenebration” style=”margin: -1em; padding: 0pt; width: 100%; background-color: #000000; top: 0px; bottom: 0px; z-index: 0; position: absolute; opacity: 0.5″> <iframe style=”width: 100%; height: 100%”> </iframe></div>
  2. Un altro div con id a piacere che andrà a costituire la finestrella con il simpatico messaggio…