如何创建一个简单的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');
}