Come funzione l'Overlay?

[stakkit]

Ciao a tutti!
Mi potete spiegare per favore questo codice:

<script> 
function toggleOverlay(){ 
        document.body.className = document.body.className.indexOf('overlaid') != -1 ? '' : 'overlaid'; 
} 
        document.addEventListener('DOMContentLoaded', function(){ // close when the gray part is clicked 
        document.querySelector('.overlay').addEventListener('click', function(ev){ 
             if (/overlay|wrap/.test(ev.target.className)) toggleOverlay(); 
  }); 
}); 
</script> 

So tutto di HTML e CSS ma sono ignorante in javascript.
Quel codice sopra è un overlay.. che funziona quando si clicca sul link:

[url="#"]Clicca qui per visualizzare l'Overlay[/url] 

Dopo averci cliccato si visualizza l'overlay tramite lo script e il contenuto dell'overlay è:

<div id="overlay"> 
            <div class="wrap-outer"> 
                  <div class="wrap"> 
                       <div class="my-dialog" id="box"> 
                            <h1>testooooooooo</h1> 
                                 testoooooo ecccccc..................... 
                             <hr /> 
                              <button id="boxclose">Chiudi</button> 
                         </div> 
                   </div> 
               </div> 
</div> 

Poi c'è lo stile di quello che appare.. che non importante quindi non c'è bisogno che lo scriva..
Quello che vorrei chiedere è semplice per voi... vorrei sapere se posso fare un altro link diverso che faccia apparire una altra cosa diversa.. cosa dovrei cambiare in <script>? dovrei forse cambiare il nome onClick="toggleOverlay();"?

Grazie mille!!!

[stakkit]

Non c'è nessuno che può aiutarmi?