由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的js
但是还是自己写的比较放心，顺便练习一下对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弹出框