js实现简单模态窗口，背景灰显

没什么好说的，都是js，用一个iframe将页面遮挡，iframe上面一个div层，js面向对象做的，其中有部分是js动态生成style。ModeWindow.js复制代码代码如下:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="ModeWindow.js"></script> <script language="javascript" type="text/javascript"> var myWin; function show1(){ var divtest = document.getElementById("divtest"); divtest.style.display="block"; myWin = new ModeWindow(divtest,200,300,300,100,"i change!"); myWin.show(); } function show2(){ var tbtest = document.getElementById("tbtest"); tbtest.style.display="block"; //myWin = new ModeWindow(tbtest); myWin = new ModeWindow(tbtest,200,200,200,222,"hello world!"); myWin.show(); } function Winclose() { myWin.close(); } </script> </head> <body> <form id="form1" runat="server"> <table id="tbtest" style="display: none"> <tr> <td style="width: 100px"> <input id="Text6" type="text" /></td> <td style="width: 100px"> <input type="button" onclick="Winclose()" value="close" /></td> </tr> </table> <div id="divtest" style="display: none"> <br /> <br /> 我来了！<input type="button" onclick="Winclose()" value="close" /> </div> <div align="center"> <table width="800" height="500"> <tr> <td style="width: 100px"> <input id="Text2" type="text" /></td> <td style="width: 100px"> <input id="Text1" type="text" /></td> <td style="width: 100px"> <input id="Text3" type="text" /></td> <td style="width: 100px"> <input id="Text4" type="text" /></td> <td style="width: 100px"> <input id="Text5" type="text" /></td> </tr> <tr> <td style="width: 100px"> <input type="button" onclick="show2()" value="open table" /></td> <td style="width: 100px"> <input type="button" onclick="show2()" value="open table" /></td> <td style="width: 100px"> <input type="button" onclick="show2()" value="open table" /></td> <td style="width: 100px"> <input type="button" onclick="show1()" value="open div" /></td> <td style="width: 100px"> <input type="button" onclick="show1()" value="open div" /></td> </tr> </table> </div> </form> </body> </html> 在线演示 http://img.jb51.net/online/ModeWindow/index.htm

　　推荐阅读

　　用js删除tbody的代码

runcode 123123123123 123123123123 123123123123 abcabcabcabc abcabcabcabc abcabcabcabc 删除表格的第一个tbody（这个表格只有俩tbody，所以>>>详细阅读

本文标题：js实现简单模态窗口，背景灰显

地址：http://www.17bianji.com/kaifa2/JS/29216.html

1/2 1