How to create a simple mootools popup

I would like to create a simple mootools popup as follows.

<?php for($i=1;$i<10;$i++)  :   ?>

<a i开发者_Python百科d="link_<?php echo $i;?>" onclick="viewContent(<?php echo $i;?>)">Click <?php echo $i;?></a>
<br/>
    <div class="modalDialog" id="content_<?php echo $i;?>" style="position:absolute;z-index: 100000; display: none; width: 300px; height: 150px; left: 430px; top: 143px;">
        <h1>Message<?php echo $i;?></h1>
    </div>

<?php endfor;   ?>

<script language="javascript">
function viewContent(id)
{
    $('content_'+id).style.display = '';
}
</script>

While click on a link it will hide all other content area except this and also the visible content should appear as a popup. What are the alternation we need in above script.

So you want to hide all except the one that is clicked? Use the $$ selector:

function viewContent(id) {
    $$('.modalDialog').each(function(el){
        el.setStyle('display', 'none');
    });
    $('content_'+id).setStyle('display', 'block');
}