【JavaScript】纯粹javascript无任何插件的兼容IE6的模态框modal
浏览数：31 /
时间：2015年06月08日
模态框这东西在很多前端框架里面也是存在的，但是很多前端框架，如Bootstrap，AmazeUI，Jquery对IE6的兼容性极其糟糕，因此如果自己手写一个纯粹javascript无任何插件的的模态框，不仅能够兼容IE6，对其它浏览器很有很大的兼容性，同时，也好改。
一、基本目标
比如如下的模态框，怎么用在纯粹html+css+javascript，在无任何前端插件的情况下实现呢？
可以看到效果图，是在IETester的IE6模式中进行的，没有任何问题。
我还在这个模态框里面镶嵌了一个表单。反正你想怎么整就怎么整。当然，还要可移动什么的就算了，你根本就没有必要写这么多特效，搞多了，你的客户也不会赏析你的，浪费表情。
二、基本思想
这东西其实一点不难，网上的代码写得太糟糕罢了。
如图，其实关键是你在打开模态框的那瞬间，把早已隐藏好的定位为position:absolute的模态框显示出来。
之后在javascript的添加一个大小为整个浏览器窗口大小的，灰色透明的div，bodyMask。
IE6是支持透明的。透明样式，兼容全浏览器的css写法如下：
.opacity{
filter:alpha(opacity=40);
opacity:0.4;
}之后，在模态框的“关闭”按钮，就是把bodyMask用javascript中remove节点的方式remove掉，同时隐藏这个模态框。Javascript对DOM的操作，具体见《【JavaScript】网页节点的增删改查》（点击打开链接）。
三、制作过程
有了上面的基本思想，则可以开工了。
1、HTML布局
其HTML布局如下，可以看到bodyMask这个灰色遮罩div，在HTML根本没有出现。一会儿在javascript显示。
其实模态框也可以在javascript中添加，但是这样太不好维护了吧？还是藏在HTML部分！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsModal</title>
</head>
<body>
<!--原网页的内容-->
<h1>纯粹javascript无任何插件的兼容IE6的模态框</h1>
<p>ssssssssssssssssssssss</p>
<p>ssssssssssssssssssssss</p>
<!--除了这个打开模态框的按钮，是调用下面的openNewDiv()函数，其余没有任何特别-->
<button onclick="openNewDiv()">打开模态框，登录一ji！</button>
<p>ssssssssssssssssssssss</p>
<p>ssssssssssssssssssssss</p>
<p>ssssssssssssssssssssss</p>
<!--这里是已经藏在网页中的模态框-->
<!--除了宽度，背景颜色，边框这三个属性，其余的显示、定位、层次属性都是必须的。z-index层次属性，只在position:absolute的情况下有效。-->
<div id="modalDiv" style="display:none;position:absolute;z-index:2;width:300px;background-color:#FFFFFF;border:3px solid #0066cc;">
<!--这里仅仅是为模态框的内容好看一点，这个style属性不是必须的-->
<div style="text-align:center; padding:5px">
<!--你想在模态框中布置什么，就再这里大书特书吧！-->
用户名：<input type="text"/><br />
密码：<input type="text"/><br />
<input type="submit" value="提交"/><button onclick="dismissModal()">关闭</button><br />
</div>
</div>
</body>
</html>2、核心脚本
关键是这里的核心脚本
<script>
function openNewDiv() {
//这里取出当前窗口的长与宽。兼容各个浏览器，有滚动条没有滚动条的情况。
//你在我的模态框出现的时候，又调整窗口，可能取不到调整窗口之后的大小，那我没办法了，我没理由开个函数去不停地轮询你是否调整窗口吧？
if(document.documentElement.scrollWidth<document.documentElement.clientWidth+document.documentElement.scrollLeft){
var windowWidth=document.documentElement.clientWidth+document.documentElement.scrollLeft;
}
else{
var windowWidth=document.documentElement.scrollWidth;
}
if(document.documentElement.scrollHeight<document.documentElement.clientHeight+document.documentElement.scrollTop){
var windowHeight=document.documentElement.clientHeight+document.documentElement.scrollTop;
}
else{
var windowHeight=document.documentElement.scrollHeight;
}
//先把模态框显示出来，再利用offsetWidth与offsetHeight取其长与宽
//offsetWidth与offsetHeight是可见区域的大小，尽管modalDiv没有设置height样式，但同样可以利用这种方式取其高
document.getElementById("modalDiv").style.display="block";
var modalDivWidth=document.getElementById("modalDiv").offsetWidth;
var modalDivHeight=document.getElementById("modalDiv").offsetHeight;
//这里定位modalDiv主要是为了使其居中
document.getElementById("modalDiv").style.left=(windowWidth-modalDivWidth)/2+"px";
document.getElementById("modalDiv").style.top=(windowHeight-modalDivHeight)/2+"px";
//modalDiv的动作搞完了，搞那个灰色遮罩div，先创建一个节点。
var bodyMask=document.createElement("div");
bodyMask.id="bodyMask";
bodyMask.style.position="absolute";
//如果你的网页中还有其它zIndex，那么，这个只应该大于其它zindex，同时上面的模态框的zindex，应该比这个zindex大1
bodyMask.style.zIndex="1";
//这个灰色遮罩层的长与宽就是当前窗口的长与宽。
bodyMask.style.width=windowWidth+"px";
bodyMask.style.height=windowHeight+"px";
bodyMask.style.top="0px";
bodyMask.style.left="0px";
bodyMask.style.background="#000";
//设置其透明度为40%
bodyMask.style.filter="alpha(opacity=40)";
bodyMask.style.opacity="0.40";
//在body节点下添加这个div
document.body.appendChild(bodyMask);
}
//关闭模态框就两步，使模态框隐藏同时移除bodyMask
function dismissModal() {
document.getElementById("modalDiv").style.display="none";
document.body.removeChild(document.getElementById("bodyMask"));
}
</script>至此，整个兼容IE6的模态框就写完了，谁说不用框架写不出好网页的？用框架才越来越写不出好网页！郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
