这个简单的类似alert的函数，效果还行，至于css样式，那没的说了，笔者确实尽力了，如果读者觉得太烂，你可以随便改函数的样式的，反正，笔者觉得还可以，呵呵。
<!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" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>实现类似alert效果的函数</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> </head> <body> </body> </html> <script type="text/javascript"> (function(){ //实现类似alert炫酷效果的函数 function aler(str){ //弹出的div由遮罩层里面的弹出框以及按钮组成。 //给div的style添加z-index:9999，数值越大，div越在最上面 //rgba(0~255,0~255,0~255,opacity)opacity透明透明度为0~1，只设置背景颜色为透明 //生成弹出的div，也是遮罩层 var ale = document.createElement('div'); ale.setAttribute("style","background: rgba(0, 0, 0,0.5); position: fixed; left: 0px; top: 0px; 100%; height: 100%; overflow: hidden; user-select: none; z-index:1032;"); //给遮罩层添加id属性，为的是下面点击按钮时删除掉它 ale.setAttribute("id","mask"); //弹出的div添加到body中 document.body.appendChild(ale); //生成弹出框 var po = document.createElement('div'); //弹出框添加到弹出的div遮罩层中 ale.appendChild(po); //获取弹出div对象 var mask = document.getElementById('mask'); //按钮，绑定div弹出层的点击删除事件 var btn = '<button onclick="document.body.removeChild(mask);">确定</button>'; //弹出框的高度和宽度、背景颜色 var H = 200,W = 240,backgroundcolor = '#F8931D'; //获取实际页面的left值。（页面宽度减去元素自身宽度/2） var Left = (document.documentElement.clientWidth-W)/2; //获取实际页面的top值。（页面宽度减去元素自身高度/2） var top = (document.documentElement.clientHeight-H)/2; //给弹出框设置属性 po.setAttribute('style',''+W+'px;height:'+H+'px; background-color:'+backgroundcolor+';border:1px solid #000;position:absolute;'+'top:'+top+'px;'+'left:'+Left+'px;'); po.innerHTML= '<div style="line-height:'+H*6/7+'px;text-align:center;'+W+'px;height:'+H*6/7+'px;">'+str+'</div>' + '<div style="line-height:'+H*1/7+'px;text-align:center;'+W+'px;height:'+H*1/7+'px;">'+btn+'</div>'; } //返回Aler函数，取名为Alert return window.Alert=aler; })(); Alert('hello world'); alert('确定'); </script>