关于jsp页面点击一个超链接或按钮 弹出一个层得问题

最近在做一个网上商城的小项目  做评论商品时想完成点击一个超链接 然后马上一个层跳出  写完评论之后确认 就层关闭 然后继续评价别的商品  我是想先做一个隐藏的层  点的时候显示出来  我是个初学者，不知道具体怎么搞
 以下是我写好的层得代码 求高手给我添加点代码使我点了超链接 “评论”  这个超链接之后就跳出这个层    求高手帮忙啊   <div >
<form action="Comment.do?p=comment" method="post">
<input type="hidden" name="goodsId" value="${b.goodsId}">
  <table width="100%" border="1">
    <tr>
      <td colspan="2"><img src="image/goodsphotos/${b.goodsImage}" width="40" height="40">&nbsp;&nbsp;&nbsp;&nbsp;${b.goodsName }    </td>
    </tr>
    <tr>
      <td height="94" colspan="2">
        <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
      </td>
    </tr>
    <tr>
      <td width="24%"><input type="submit" name="button" id="button" value="提交" /></td>
      <td width="76%"><input type="reset" name="button2" id="button2" value="取消" /></td>
    </tr>
  </table>
  </form>
</div>

解决方案 »

  1.   


    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <style type="text/css">
    /*让评论层一开始隐藏*/
    #comment{
    display:none;
    /*对层进行一些定位*/
    position:absolute;
    z-index:1;
    width:400px;
    height:200px;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-100px;
    background-color:green;
    }
      </style>
      <script type="text/javascript">
      <!--
    //打开评论层
    function open_comment(){
    document.getElementById("comment").style.display="block";
    } //隐藏评论层
    function close_comment(){
    document.getElementById("comment").style.display="none";
    }
      //-->
      </script>
     </head>

     <body>
     <a href="#" onclick="open_comment()">评论</a>
      <div id="comment">
    <form action="Comment.do?p=comment" method="post">
    <input type="hidden" name="goodsId" value="${b.goodsId}">
      <table width="100%" border="1">
      <tr>
      <td colspan="2"><img src="image/goodsphotos/${b.goodsImage}" width="40" height="40">&nbsp;&nbsp;&nbsp;&nbsp;${b.goodsName } </td>
      </tr>
      <tr>
      <td height="94" colspan="2">
      <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
      </td>
      </tr>
      <tr>
      <td width="24%"><input type="submit" name="button" id="button" value="提交" /></td>
      <td width="76%"><input type="reset" name="button2" id="button2" value="取消" onclick="close_comment()"/></td>
      </tr>
      </table>
      </form>
    </div>
     </body>
    </html>