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

最新推荐文章于 2025-05-17 19:53:12 发布

原创最新推荐文章于 2025-05-17 19:53:12 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#button #iframe #javascript #server #firefox #ie

这篇博客展示了如何使用JavaScript和IFrame实现简单的模态窗口功能。通过点击按钮，可以显示和关闭一个覆盖在页面上的IFrame和div层，提供了一种在页面上弹出信息或操作的交互方式。代码中涉及了DOM操作、样式动态生成以及面向对象编程的概念。

昨天中午做项目需要一个模态窗口，想起上一个公司的项目经理曾经做过一个比较牛的模态窗口，至今没用搞清楚实现原理，平时也没有时间去分析，试着自己做了一个，用了一天的时间终于完成了，给大家一起分享，也希望高手多提意见。第一次在博客园上发文章，挺高兴的。

没什么好说的，都是js，用一个iframe将页面遮挡，iframe上面一个div层，js面向对象做的，其中有部分是js动态生成style。

下面是效果图：

代码部分：

下载这里的 js文件
HTML 代码：

 <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>