用原生JS写的一个遮罩alert提示框，兼容FF、chorme、IE6、7、8

Question

JS代码如下：var XX = window.XX || {};XX.alert = function(title, content){
var mask   = XX.alert.mask,
outDiv = XX.alert.outDiv;

if(!mask){ //若相关的alert元素不存在则先创建
mask   = XX.alert.mask   =  document.createElement('div');
outDiv = XX.alert.outDiv = mask.cloneNode(false);

outDiv.id = 'xx-alert-out';
mask.id = 'xx-mask';

outDiv.innerHTML = '<h5 class="alert-title">' + title + 
'</h5><p class="alert-content">' + content + 
'</p><input type="button" value="确定" id="alert-btn"/>';
document.body.appendChild(mask);
document.body.appendChild(outDiv);

var alertBtn = document.getElementById('alert-btn');
alertBtn.onclick = function(){ //‘确定’按钮事件，点击则隐藏
XX.hide(outDiv);
XX.hide(mask);
/*隐藏后，移除事件*/
XX.removeEvent(window, 'resize', XX.alert.setMaskSize);
XX.removeEvent(window, 'scroll', XX.alert.setMaskSize);
};
}

XX.show(outDiv); var winWidth   = XX.getWindowWidth(),
winHeight    = XX.getWindowHeight(),
scrollWidth  = document.body.scrollWidth,
scrollHeight = document.body.scrollHeight;

/*设置alert框居中*/
outDiv.style.left = (winWidth - outDiv.offsetWidth)/2 + 'px';
outDiv.style.top = (winHeight - outDiv.offsetHeight)/2 + 'px';

/*设置遮罩高度和宽度充满整个浏览器*/
mask.style.width  = winWidth + 'px';
mask.style.height = winHeight + 'px';
XX.show(mask); //显示出来


/*当滚动条滚动或者调整窗口大小时，mask层应改变大小适应窗口的变化*/
XX.addEvent(window, 'resize', XX.alert.setMaskSize);
XX.addEvent(window, 'scroll', XX.alert.setMaskSize);
};/*设置mask层高度宽度以响应滚动事件和调整窗口大小事件*/
XX.alert.setMaskSize = function(){
if(/MSIE ([^;]+)/.test(navigator.userAgent)){
return function(){
XX.alert.mask.style.width = XX.getWindowWidth() + XX.getScrollX()  + 'px';
XX.alert.mask.style.height = XX.getWindowHeight() + XX.getScrollY() + 'px';
};
} else {
return function(){
XX.alert.mask.style.width = XX.getWindowWidth() + XX.getScrollX() - 17 + 'px';
XX.alert.mask.style.height = XX.getWindowHeight() + XX.getScrollY() - 17 + 'px';
}
}
}();/*添加删除事件函数*/
XX.addEvent = function(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
XX.addEvent = function(elem, type, handler){
elem.addEventListener(type, handler, false);
};
} else {
elem.attachEvent('on'+type, handler);
XX.addEvent = function(elem, type, handler){
elem.attachEvent('on'+type, handler);
};
}
};XX.removeEvent = function(elem, type, handler){
if(elem.removeEventListener){
XX.removeEvent = function(elem, type, handler){
elem.removeEventListener(type, handler, false);
};
} else {
XX.removeEvent = function(elem, type, handler){
elem.detachEvent('on'+type, handler);
};
}
};/*
 * 确定浏览器滚动条位置的函数
 * pageXOffset:经测试，chrome和FF下存在，IE下无效
 */
XX.getScrollX = function(){
//用于IE6/7的严格模式中
var de = document.documentElement;

return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
};XX.getScrollY = function(){
//用于IE6/7的严格模式中
var de = document.documentElement;

return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
};/*
 *获得页面的视口尺寸（不包括滚动条之外的内容） 
 *innerHeight: FF和Chrome支持，IE不支持
 */
XX.getWindowHeight = function(){
//用于IE6/7的严格模式中
var de = document.documentElement;

return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
};XX.getWindowWidth = function(){
//用于IE6/7的严格模式中
var de = document.documentElement;

return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
};//隐藏元素函数
XX.hide = function(elem){
var cur_display = elem.style.display;

if(cur_display != 'none'){
elem.$oldDisplay = cur_display;
}

elem.style.display = 'none';
};
/*显示元素函数
 * 参数type: 要显示的格式（'block'、'inline'等），
 * 若不输入，则先查找元素是否有保存的display属性，若有，则更改为保存的display属性，
 * 否则默认为''，此时会清除元素的display属性，从而继承样式表的display属性，
 * 若样式表display为none，此时元素则不会显示出来
 */
XX.show = function(elem, type){
elem.style.display = elem.$oldDisplay || type || '';
};
CSS代码如下：#xx-mask{
background-color:#CCCCCC;
position:absolute;
width:100%;
height:100%;
opacity:0.5;
filter:alpha(opacity=50);
zoom:1;
margin:0;
left:0;
top:0;
z-index:9000;
}#xx-alert-out{
background-color:#CCD9E8;
border:1px outset #CCD9E8;
position:absolute;
text-align:center;
padding:0 10px 10px;
z-index:9003;
}.alert-title{
color:#15428B;
margin:0;
text-align:left;
font-size:14px;
}.alert-content{
margin:5px auto;
}.alert-btn{
display:block;
margin:0 auto;
text-align:center;
}
调用方式： XX.alert(title, content); 测试代码：
<!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" />
<link rel="stylesheet" href="xx.alert.css" />
<script type="text/javascript" src="xx.alert.js"></script>
</head>
<body>
<div>testtest</div>
<input type="button" value="test" onclick="XX.alert('xxx', 'xxxcontent');"/>
<div style="position:absolute; top:1200px;left:1500px">aaaaa</div>
</body>
</html>

Answer 1

1.为什么有mask这个层，这个div很多余，为啥不直接用body来代替，另外有没有考虑过嵌入到iframe中你的影响的width。
2.弹出的内容过长的时候不会换行
3.这个alert没有阻塞功能

Answer 2

1、body代替？ 如果客户用的body本身设置了各种一些背景色呢？我总不好去影响客户代码吧，本身的这个设计就是确保不会和任何客户代码打交道，嵌入IFRAME确实没考虑过，平常都没用到这个，所以一时没注意，不过就算嵌入了iframe，会对width有影响吗？ 我的代码原理是获得浏览器的当前视口大小，然后监听resize和scroll事件动态改变mask层。如果会出现问题，希望能给我举个例子。2、这个确实如此，因为我觉得alert本身就是作为一种提示框，而不是作为一种显示大量文本的东西，如果非要输出大量内容且需要换行，那么需要自己添加<br>标签。3、这个设计本身就是为了不阻塞的alert而存在的，如果要阻塞，直接用系统的alert不就好了吗？

Answer 3

不好意思，第三点我可能理解错了你的意思，你说的应该是连续调用alert,只会直接显示一次最后的alert内容，这确实是个大问题，我这里改了一下，并修正了原来的一些BUG。  以下代码替换1楼的XX.alert函数。XX.alert = function(){
var _alertQueue = []; //消息队列

  return function(title, content){
var mask = XX.alert.mask, outDiv = XX.alert.outDiv;

if (!mask) { //若相关的alert元素不存在则先创建
mask = XX.alert.mask = document.createElement('div');
outDiv = XX.alert.outDiv = mask.cloneNode(false);
outDiv.id = 'xx-alert-out';
mask.id = 'xx-mask';

outDiv.innerHTML = '<h5 class="alert-title" id="aTitle">' + title +
'</h5><p class="alert-content" id="aCtn">' +
content +
'</p><input type="button" value="确定" id="alert-btn"/>';
document.body.appendChild(mask);
document.body.appendChild(outDiv);

XX.alert.title = document.getElementById('aTitle');
XX.alert.content = document.getElementById('aCtn');
XX.alert.isShowing = true;
var alertBtn = document.getElementById('alert-btn');
alertBtn.onclick = function(){ //‘确定’按钮事件，点击则隐藏
XX.hide(outDiv);
XX.hide(mask);
/*隐藏后，移除事件*/
XX.removeEvent(window, 'resize', XX.alert.setMaskSize);
XX.removeEvent(window, 'scroll', XX.alert.setMaskSize);
XX.alert.isShowing = false;

var msg = _alertQueue.shift();
if(msg){ //还有消息，继续显示
XX.alert(msg.title, msg.content);
}
};
}
else if(XX.alert.isShowing){
_alertQueue.push({
title:title,
content:content
});
} else{
document.getElementById('aTitle').innerHTML = title;
document.getElementById('aCtn').innerHTML = content;
}

XX.show(outDiv);
XX.alert.isShowing = true;

var winWidth = XX.getWindowWidth(), winHeight = XX.getWindowHeight(), scrollWidth = document.body.scrollWidth, scrollHeight = document.body.scrollHeight;

/*设置alert框居中*/
outDiv.style.left = (winWidth - outDiv.offsetWidth) / 2 + 'px';
outDiv.style.top = (winHeight - outDiv.offsetHeight) / 2 + 'px';

/*设置遮罩高度和宽度充满整个浏览器*/
mask.style.width = winWidth + 'px';
mask.style.height = winHeight + 'px';
XX.show(mask); //显示出来
/*当滚动条滚动或者调整窗口大小时，mask层应改变大小适应窗口的变化*/
XX.addEvent(window, 'resize', XX.alert.setMaskSize);
XX.addEvent(window, 'scroll', XX.alert.setMaskSize);
}
}();

Answer 4

换行问题，如果真需要换行，可以在#xx-alert-out的CSS中加入以下CSS代码：max-width:200px;
max-height:500px;
min-width: 50px;
min-height: 50px;
word-wrap:break-word;