Ho poco tempo, ma ti ho preparato volentieri una base di partenza per il primo quesito: sono del tuo stesso parere, evito di installare interi CMS ad occhi chiusi e preferisco semplificare le mie esigenze pur di stare a codici di cui conosco ogni riga.
codice:
<!DOCTYPE html PUBLIC>
<html>
<head><title>sovrastrato</title>
<script type="text/javascript">
function copri(){
document.getElementById("sovra").style.display="block";
};
</script>
</head><body>
<div align="center">
<h1>
Questo è il contenuto della pagina</h1>
<input value="oscura" onclick="copri();" type="button">
</div>
<div id="sovra"
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none">
</div>
</body>
</html>
Il div id="sovra" produce l' "oscuramento" anche se sulle prime non vedrai differenze: nota però che il pulsante "oscura" non sarà più cliccabile una seconda volta, perché "ricoperto" dal div id="sovra" che è passato dallo stato di display: none a display: block e che quindi, impedisce di cliccare su link e quant' altro sulla pagina proprio come avviene quando compare un alert(); a differenza di questo, non impedisce però di chiudere la window.
Ora un passo successivo può essere, per "vederlo", assegnare nello STYLE del DIV anche un colore di background-color: ; e un grado di opacità (semi-trasparenza) opacity: 0.4;
IExplorer vuole però il suo filter: alpha(opacity=40);
... e ti lascio fare ricerche a riguardo, anche in proposito all' OPACITY supportata dai Browser meno recenti.
Ora, anche quello che inserisci come contenuto nel DIV semitrasparente, assume anch' esso il medesimo grado di opacità: per prima cosa, potrebbe essere un pulsante che richiama una function opposta per riportare il DIV a display: none; e liberare la pagina.
Ma se vogliamo che tutto l' alert che andiamo a modellare mantenga invece piena opacità, dobbiamo farlo apparire con un secondo DIV.