一个不错的简单的显示隐藏层效果
分享一个不错的简单的显示隐藏层效果,利用js实现,简单可以扩展!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head" runat="server"> <title>一个不错的显示隐藏层效果 诺豆网 nuodou.com</title> <script language="javascript" type="text/javascript"> function hide(divName){ document.getElementById(divName).style.display = "none"; } function show(divName){ document.getElementById(divName).style.display = ""; } </script> </head> <body> <form id="form1" runat="server"> <table style="width: 697px"> <tr> <td style="width: 100px"> <input id="Button2" onclick="show('WeekProblem')" type="button" value="显示"/></td></tr> <tr> <td style="width: 100px"> <div id="WeekProblem" style="display: none; position: absolute;"> <table width="85%" border="0" align="center" cellpadding="10" cellspacing="0"> <tr> <td height="2" bgcolor="#CCCCCC" ></td></tr> <tr> <td bgcolor="#F7F7F7"> <table width="80%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#DADBDE"> <tr bgcolor="#F6F6F6"> <td height="49"><div align="center">问题描述</div></td> <td><textarea name="textarea2" cols="55" rows="5">有问题请到诺豆网留言 https://yangjunwei.com </textarea></td></tr> <tr bgcolor="#F7F7F7"> <td height="40"> </td> <td><input type="button" name="BtnWeekProblem" value="隐藏" onClick="hide('WeekProblem') "> <a href="#"></a></td></tr> </table></tr> </table> </div> </td> </tr> </table> </form> </body> </html>