<html> <head></head> <script> var oPopup; var popTop=50; var mytime; function closemsg(){ try{ clearTimeout(mytime); }catch(e){} oPopup.hide(); } function popmsg(tb){ oPopup = window.createPopup(); var msgstr1=document.getElementById(tb).innerText; var winstr='<table style="border-top: #FFFFFF 1px solid; border-left: #FFFFFF 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgcolor=#cfdef4 border=0>'; winstr +=' <tr>'; winstr +=' <td style="font-size: 12px; background-image: url(msgTopBg.gif); color: #0f2c8c" width=30 height=24></td>'; winstr +=' <td style="font-weight: normal; font-size: 12px; background-image: url(msgTopBg.gif); color: #1f336b; padding-top: 4px;padding-left: 4px" valign=center width="100%"> 管理平台消息提示:</td>'; winstr +=' <td style="background-image: url(msgTopBg.gif); padding-top: 2px;padding-right:2px" valign=center align=right width=19><span title=关闭 style="cursor: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" οnclick="window.parent.closemsg();">×</span></td>'; winstr +=' </tr>'; winstr +=' <tr>'; winstr +=' <td style="padding-right: 1px; background-image: url(1msgBottomBg.jpg); padding-bottom: 1px" colSpan=3 height=100%>'; winstr +=' <div style="border-right: #b9c9ef 1px solid; padding-right: 13px; border-top: #728eb8 1px solid; padding-left: 13px; font-size: 12px; padding-bottom: 150px; border-left: #728eb8 1px solid; width: 100%; color: #1f336b; padding-top: 6px; border-bottom: #b9c9ef 1px solid; height: 100%">' winstr +=' <font color=#FF0000></font><br><br>'; winstr +=' <div align=center style="word-break:break-all">'; winstr +=msgstr1; winstr +=' </div>'; winstr +=' </div>'; winstr +=' </td>'; winstr +=' </tr>'; winstr +='</table>'; oPopup.document.body.innerHTML = winstr; var x=document.getElementById(tb).offsetLeft+document.getElementById(tb).offsetWidth; var y=document.getElementById(tb).offsetTop+document.getElementById(tb).offsetHeight; oPopup.show(x, y, 200, 150, document.body); } function display1() { document.getElementById("tab1").style.display="block"; document.getElementById("tab2").style.display="none"; document.getElementById("tab3").style.display="none"; } function display2() { document.getElementById("tab2").style.display="block"; document.getElementById("tab1").style.display="none"; document.getElementById("tab3").style.display="none"; } function display3() { document.getElementById("tab3").style.display="block"; document.getElementById("tab2").style.display="none"; document.getElementById("tab1").style.display="none"; } </script> <body> <table width="500" border="1" height="100"> <tr> <td bgcolor="#000099" id="tb1" onMouseOver="popmsg('tb1')" οnmοuseοut="closemsg()">11111111111111</td> <td bgcolor="#33CCFF" id="tb2" onMouseOver="popmsg('tb2')" οnmοuseοut="closemsg()">2222222222233</td> <td bgcolor="#FFCC66" id="tb3" onMouseOver="popmsg('tb3')" οnmοuseοut="closemsg()">3333333333333</td> </tr> </table> <br><br><br> <table width="484" border="0"> <tr> <td height="40" bgcolor="#009933" onMouseUp="display1()"> </td> <td bgcolor="#0000CC" οnmοuseup="display2()"> </td> <td bgcolor="#CCFF66" οnmοuseup="display3()"> </td> </tr> <tr id="tab1" style="display:block"> <td height="200" colspan="3" bgcolor="#009933"> </td> </tr> <tr id="tab2" style="display:none"> <td height="200" colspan="3" bgcolor="#0000CC"> </td> </tr> <tr id="tab3" style="display:none"> <td height="200" colspan="3" bgcolor="#CCFF66"> </td> </tr> </table> </body> </html> 一个简单的选项卡和简单的弹出式对话框