怎么用一个按钮控制弹出层的显示和隐藏 _JavaScript

如何用一个按钮控制弹出层的显示和隐藏？
而且要求弹出层的位置始终在按钮的上方，默认不显示，点击其他地方也可以关闭层，效果就和qq聊天窗口的“插入表情”一样

求详细代码

------解决方案--------------------
你有导入jquery吗？必须倒入jquery才可以的。
<script language="javascript" src="C:\Documents and Settings\bree06\My Documents\jquery.js"></script>
修改这里，改为你自己的jquery路径即可。
------解决方案--------------------
不弹出层2，也不做任何处理代码：

HTML code


<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层111111</div>
<div id="face2" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层22222</div>
<input type="button" value="^_^1" onclick="showFace(this,'')"><span style="width: 300px;"></span>
<input type="button" value="^_^2" onclick="showFace(this,'2')">
<script>
function showFace(evnet,p2){
  var _top=0,_left=0;
    var _op=evnet;
    while(_op!=null){
        _top+=_op.offsetTop;
        _left+=_op.offsetLeft;
        _op=_op.offsetParent;
    }
    document.getElementById('face'+p2).style.top=_top-213;
    document.getElementById('face'+p2).style.left=_left;

document.getElementById('face'+p2).style.display=(document.getElementById('face').style.display=="block" || document.getElementById('face2').style.display=="block")?'none':'block';

}
function hideFace(){
  document.getElementById('face').style.display="none";
  document.getElementById('face2').style.display="none";
}
document.onclick=function (){
  if((document.getElementById('face').style.display=="block" ||  document.getElementById('face2').style.display=="block")
  && event.srcElement.tagName !='INPUT'
  && event.srcElement.tagName !='DIV'){
  document.getElementById('face').style.display="none";
  document.getElementById('face2').style.display="none";
  }
}
</script>