Как создать простое всплывающее окно mootools

Question

Я хотел бы создать простое всплывающее окно mootools следующим образом.

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

<a id="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>

Если щелкнуть ссылку, она скроет всю другую область содержимого, кроме этой, а также видимый контент должен появиться в виде всплывающего окна. Какие чередования нам нужны в приведенном выше сценарии.

Answer 1

То есть вы хотите скрыть все, кроме того, на который нажали? Используйте селектор $$:

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