自定义弹窗Style样式

但是还是自己写的比较放心，顺便练习一下对DOM的操作

支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式

听取建议后，修改了position:fixed, IE6下用hack处理了。

点击看效果:

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

所需CSS：

使用方法，直接调用函数，传递所需定义的信息，支持定义是否有取消键：

alertMsg(msg, mode) 
//mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框

函数代码：添加了一个获取窗口尺寸的函数，又长长了很多，可以把获取窗口的尺寸另外立一个函数放公共库里面，这里只是为了方便演示，写到一个函数里面

function alertMsg(msg, mode) { //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮
 msg = msg || '';
 mode = mode || 0;
 var top = document.body.scrollTop || document.documentElement.scrollTop;
 var isIe = (document.all) ? true : false;
 var isIE6 = isIe && !window.XMLHttpRequest;
 var sTop = document.documentElement.scrollTop || document.body.scrollTop;
 var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
 var winSize = function(){
 var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
 // innerHeight获取的是可视窗口的高度，IE不支持此属性
 if (window.innerHeight && window.scrollMaxY) {
 xScroll = document.body.scrollWidth;
 yScroll = window.innerHeight + window.scrollMaxY;
 } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
 xScroll = document.body.scrollWidth;
 yScroll = document.body.scrollHeight;
 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
 xScroll = document.body.offsetWidth;
 yScroll = document.body.offsetHeight;
 }

 if (self.innerHeight) { // all except Explorer
 windowWidth = self.innerWidth;
 windowHeight = self.innerHeight;
 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
 windowWidth = document.documentElement.clientWidth;
 windowHeight = document.documentElement.clientHeight;
 } else if (document.body) { // other Explorers
 windowWidth = document.body.clientWidth;
 windowHeight = document.body.clientHeight;
 }

 // for small pages with total height less then height of the viewport
 if (yScroll < windowHeight) {
 pageHeight = windowHeight;
 } else {
 pageHeight = yScroll;
 }

 // for small pages with total width less then width of the viewport
 if (xScroll < windowWidth) {
 pageWidth = windowWidth;
 } else {
 pageWidth = xScroll;
 }

 return{
 'pageWidth':pageWidth,
 'pageHeight':pageHeight,
 'windowWidth':windowWidth,
 'windowHeight':windowHeight
 }
 }();
 //alert(winSize.pageWidth);
 //遮罩层
 var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;';
 styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV
 var shadowDiv = document.createElement('div'); //添加阴影DIV
 shadowDiv.style.cssText = styleStr; //添加样式
 shadowDiv.id = "shadowDiv";
 //如果是IE6则创建IFRAME遮罩SELECT
 if (isIE6) {
 var maskIframe = document.createElement('iframe');
 maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
 maskIframe.frameborder = 0;
 maskIframe.src = "about:blank";
 shadowDiv.appendChild(maskIframe);
 }
 document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档
 //弹出框
 var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置
 var alertBox = document.createElement('div');
 alertBox.id = 'alertMsg';
 alertBox.style.cssText = styleStr1;
 //创建弹出框里面的内容P标签
 var alertMsg_info = document.createElement('P');
 alertMsg_info.id = 'alertMsg_info';
 alertMsg_info.innerHTML = msg;
 alertBox.appendChild(alertMsg_info);
 //创建按钮
 var btn1 = document.createElement('a');
 btn1.id = 'alertMsg_btn1';
 btn1.href = 'javas' + 'cript:void(0)';
 btn1.innerHTML = '确定';
 btn1.onclick = function () {
 document.body.removeChild(alertBox);
 document.body.removeChild(shadowDiv);
 return true;
 };
 alertBox.appendChild(btn1);
 if (mode === 1) {
 var btn2 = document.createElement('a');
 btn2.id = 'alertMsg_btn2';
 btn2.href = 'javas' + 'cript:void(0)';
 btn2.innerHTML = '取消';
 btn2.onclick = function () {
 document.body.removeChild(alertBox);
 document.body.removeChild(shadowDiv);
 return false;
 };
 alertBox.appendChild(btn2);
 }
 document.body.appendChild(alertBox);

 }

点击模拟Alert弹出框

点击模拟Alert弹出框

点击模拟Alert弹出框