手把手教你用DIV模拟浏览器模态窗口（欢迎围观

经常做java web前端的兄弟可能会感觉到，有时候想弹出个模态窗口，还得考虑浏览器的兼容性，Firefox和chrome等不支持模态窗口，且弹出窗的样式相当让人不满意。现在html5,css3等页面技术这么流行，加上苹果应用的逐渐普及，用户体验要求越来越高，这是个娱乐的年代，是个拼效果的年代。浏览一个布局糟糕的网站，对于追求完美的IT人员来说，不亚于一场灾难。

继续说弹窗。可能你已经在网上找到JQUERY弹窗，但样式不一定让你满意吧，且只是简单的用，没有研究它的实现原理。下面我就不僻浅簿，不使用任何辅助技术，用纯Javascript、HTML4.0.1及CSS3，说一说这个弹窗。

详细实现步骤：

1.创建用于弹出的DIV，代码如下：

<body>

<td style="color:white;font-family:bolder;font-size:10pt;">新窗口-东哥的标题</td>

</td>

</tr>

</table>

</div>

</body>

说明：DIV里嵌了一个<table>，是用于将DIV中的相关元素位置固定。一个弹窗，我们肯定需要标题栏和显示内容的部分。

1） <table>的第一行用来作弹窗的标题栏，我们加了背景色 <tr style="background-color:#075E8B;"> 这个颜色是一种较深的蓝，可以根据自己的喜好设定。

2）同时标题字体以白色显示，更加醒目和美观。

3）用10 pt的字号，这个字号是一个适中的比例（12 pt字号太大，显得凌乱和突兀）。

2.接下来，我们为这个DIV添加样式（CSS）

.popWindow{

background-color:#ffffff;

border-radius:3px;

border:2px solid #075E8B;

position:absolute;

display:block;

width:460px;

height:300px;

left:200px;

top:200px;

box-shadow:5px 5px 5px #322E2F;

z-index:999;

}

</style>

对样式各属性的说明如下：

1） background-color:#ffffff;表示DIV的背景色为白色

2） border-radius:3px;这个是圆色，让DIV四个角有一定的弧度，不会显得那么生硬，大概3个象素

3） border:2px solid #075E8B; 边框，2个象素宽

4） position:absolute; 位置：绝对定位。既然是绝对定位，就需要有个参照物，默认以最靠近的一个position:ralative;的元素为参照。如果没有position:ralative的元素，则以body为参照。则此时左边距和顶边距都为0。我们通过top和left属性来绝对定位它。

5） display:block;是否可见。block可见，none不可见。我们暂时设为可见的，是为了美化样式（看不见还怎么调？），调好之后，改为none

6） width:460px;DIV的宽度，这个也是暂时写的宽度，为了美化样式用，实际应由调用的地方根据需要传进来。别急，请继续，大功即将告成

7） height:300px;DIV的高度，和宽度作用一样，没什么好说的

8） left:200px; DIV的左边距，此处就是说距离浏览器左边多少象素

9） top:200px;DIV的顶边距。右边距和顶边距确定了，DIV的位置就绝对定位好了（如果你问我右边和下边为什么不定位？我真要无语了）

10） box-shadow:5px 5px 5px #322E2F;盒阴影，前面的3个象素值表示几个边的偏移量，后面是颜色，深灰色阴影

11）z-index:999;这表示在第几层。如果弹出层多了，大家可以分别在不同的层，这个就不会谁把谁挤到一边去了。弹窗要在顶层。

这是最初的效果，继续。。。

3.弹窗的居中问题。根据分辨率的不同，让弹窗自适应，永远处于居中状态。而且窗口大小也不能写死。

样式改造一下（去掉边距、宽度、高度等）：

.popWindow{

background-color:#ffffff;

border-radius:3px;

border:2px solid #075E8B;

position:absolute;

display:none;

box-shadow:5px 5px 5px #322E2F;

z-index:999;

}

</style>

看到没，其实还是很简洁的，少了很多行。因为边距要自适应，宽和高由调用者决定。这里去掉了相关样式，并把可见变为none。

Javascript函数如下：

function popWindowShow(url,height,width,title)

{

var popWindow = document.getElementById("popWindow");

popWindow.style.left = (document.body.scrollWidth - width)/2;

popWindow.style.top = (document.body.scrollHeight - height)/2-50;

popWindow.style.width = width;

popWindow.style.height = height;

document.getElementById("titleTd").innerHTML = title;//注意这里要用innerHTML方法，部分浏览器不支持innerText

popWindow.style.display = "block";

}

</script>

解释一下。

定义了一个javascript函数popWindowShow(url,height,width,title)，函数体里面设置了DIV的左边距、顶边距、宽度、高度、标题，最后让其可见。这个函数由调用者以onclick等事件调用。

加个按钮，点击的时候，把这个弹窗显示出来。这样就基本实现了弹窗效果了。

点击此按钮，弹出一个居中的DIV窗口。顺手写个关闭的函数吧。

function popWindowHide()

{

document.getElementById("popWindow").style.display = "none";

}

点击DIV上那个关闭的小图标时，调用一下这个关闭函数。关闭图标一会也传上来。

4.弹窗中的内容

当然不能直接把大量代码写在DIV中，我们需要的是一个通用的弹窗。这个就是为什么我们要多传一个url参数的作用了。

把DIV改造一下，里面的table再加一行，新行里放iframe，url是用来作为ifame的src的。明白了吧。

<td style="color:white;font-family:bolder;font-size:10pt;" id="titleTd">新窗口-东哥的标题</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

弹窗的JS函数变动如下：

function popWindowShow(url,height,width,title)

{

var popWindow = document.getElementById("popWindow");

var popFrame = document.getElementById("popFrame");

popWindow.style.left = (document.body.scrollWidth - width)/2;

popWindow.style.top = (document.body.scrollHeight - height)/2-50;

popWindow.style.width = width;

popWindow.style.height = height;

document.getElementById("titleTd").innerHTML = title;

popFrame.style.height = height-22;//设置Iframe的高度为DIV的高度减去标题栏的高度

popFrame.src = url;//设置iframe里的页面

popWindow.style.display = "block";

}

5.实现模态。方法是加一层DIV，满屏的，作出弹出层的背景。弹窗时把背景层显示出来，关闭时别忘记把背景层隐藏掉。

我偷点懒，就把样式直接写在DIV标记里了。这个背景层，层数要比弹窗低一点啊，不能比弹窗高，不然要把弹窗遮住了。

至此，DIV模拟模态窗口就全部完成了。不管是什么浏览器，都支持（IE8以下不支持阴影和圆角）。

最终效果：

后面黑色的是遮罩层，用来把整个背景遮住，实现模态功能。

这只是一个简单的例子，你可以充分发挥，把样式调得更加美观大气。

6.其它说明。

不需要在每一个需要弹窗的地方都加上这些代码。只需要在最顶层的框架页面中加上就行了，子页面通过top对象调用弹窗的函数即可。如：top.popWindowShow(' http://www.baidu.com ',360,200,'baidu');

本文效果支持chrome（谷歌浏览器），firefox（火狐浏览器），safari（苹果浏览器）及IE9。我用的是chrome浏览器。IE8以下版本都不支持阴影效果和圆角效果。

本文来自东哥原创，粗浅但或许也有丝毫可取之处，欢迎大家的围观和嘲笑。

附：本文完整代码：MyHtml.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>MyHtml.html</title>

.popWindow{

background-color:#ffffff;

border-radius:3px;

border:2px solid #075E8B;

position:absolute;

display:none;

box-shadow:5px 5px 5px #322E2F;

z-index:999;

}

</style>

function popWindowShow(url,height,width,title)

{

var popWindow = document.getElementById("popWindow");

var popFrame = document.getElementById("popFrame");

var popWindowBg = document.getElementById("popWindowBg");

popWindow.style.left = (document.body.scrollWidth - width)/2;

popWindow.style.top = (document.body.scrollHeight - height)/2-50;

popWindow.style.width = width;

popWindow.style.height = height;

document.getElementById("titleTd").innerHTML = title;

popFrame.style.height = height-22;//设置Iframe的高度为DIV的高度减去标题栏的高度

popFrame.src = url;//设置iframe里的页面

popWindow.style.display = "block";

popWindowBg.style.display = "block";

}

function popWindowHide()

{

document.getElementById("popWindow").style.display = "none";

document.getElementById("popWindowBg").style.display = "none";

}

</script>

</head>

<body>

<td style="color:white;font-family:bolder;font-size:10pt;" id="titleTd">新窗口-东哥的标题</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

</body>

</html>

附：关闭窗口的小图标：close.png

手把手教你用DIV模拟浏览器模态窗口（欢迎围观和嘲笑）

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义