Javascript彈出帶關閉的DIV層

<script type="text/javascript" language="javascript">
function show(checkbox_list){
    var checkbox_list = document.getElementById(checkbox_list);
checkbox_list.style.display = "block";
}
function hidden(checkbox_list){
    var checkbox_list = document.getElementById(checkbox_list);
checkbox_list.style.display = "none";
}
</script>

<table width="100%" border="0" cellpadding="0" cellspacing="1" class="table"> 

<tr>
        <td colspan="7" style="position:relative;">
            <input name="b2" type="button" value="訂餐" class="button" onclick="show('checkbox_sizemodellist')" />
            <!--div begin-->
                <div id="checkbox_sizemodellist" style="display:none;z-index:2000;position:absolute;left:3px;top:23px;border:1px solid #06c;padding:0px;background:#fff;">
                    <div style="background:#0184de;text-align:right;padding-right:3px;"><span style="width:12;border-width:0px;color:white;font-family:webdings; cursor:hand; left:-200;" onclick="hidden('checkbox_sizemodellist')">r</span></div>
                     <asp:PlaceHolder ID="phl" runat="server"></asp:PlaceHolder>
                    &nbsp;&nbsp; &nbsp;&nbsp;<input name="" type="button" class="button" style="width:40px;" value="提交"/>&nbsp;<input name="" class="button" type="button" onclick="hidden('checkbox_sizemodellist')" value="關閉" style="width:40px;"/><br />
                </div>
            <!--div end-->
        </td>
    </tr>
</table>