选项卡和对话框

来源：互联网发布：dw网络语是什么意思编辑：程序博客网时间：2024/05/02 02:42

<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;" onclick="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')" onmouseout="closemsg()">11111111111111</td> <td bgcolor="#33CCFF" id="tb2" onMouseOver="popmsg('tb2')" onmouseout="closemsg()">2222222222233</td> <td bgcolor="#FFCC66" id="tb3" onMouseOver="popmsg('tb3')" onmouseout="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" onmouseup="display2()"> </td> <td bgcolor="#CCFF66" onmouseup="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>

一个简单的选项卡和简单的弹出式对话框