由于页面中原来的alert弹框样式相当的丑，所以就想到了自己去设置一下alert的弹框样式
首先是自己先设计好一个弹框的样式可以如下图：
样式搭建完成就可以用js来编写一个alert函数了：
js部分如下：
function alert(e){ //此处将html中的div等元素拼接起来，添加到body中 var html=""; html+="<div class='con'><div id='msg'>"; html+="<div class='info_message'>"; html+="<div class='alertTitle'>提示</div>"; html+="<span class='detail_message'>"+e+"</span>"; html+="</div><div id='alertSure'>确定</div>"; html+="<div id='alertCancel'>取消</div></div></div>" $('body').append(html); clearmsg(); } function clearmsg(){ //确认按钮 $('#alertSure').click(function(){ $("#msg").remove(); $('.con').remove(); }) //取消按钮 $('#alertCancel').click(function(){ $("#msg").remove(); $('.con').remove(); }) };将这个js引用，前提要添加jq的框架在此js前面要不$符号和一些方法会报错，有兴趣的可以用原生js来操作
下面贴一下我的代码，有兴趣的同学可以看下效果
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>alert样式修改</title> <link rel="stylesheet" href="alert.css"> <script src="jquery-1.11.3.min.js"></script> <script src="alert.js"></script> </head> <body> 这是我自己编写的样式div后面放到js中了，此处是注释掉的 <!-- <div class="con"> <div id='msg'> <div class="info_message"> <div class="alertTitle"></div> <span class="detail_message"> 显示信息显示信息 </span> </div> <div id="alertSure">确定</div> <div id="alertCancel">取消</div> </div> </div> --> <script> alert('测试'); </script> </body> </html>css：
html,body{height:100%;} .con{ width:100%; height:100%; background:rgba(0,0,0,.1); position:relative; } #msg{ position:absolute; top:30%; left:35%; } .info_message { color: #000; background:#fff; height: 200px; display: inline-block; width:400px; border-radius: 5px; } #alertSure,#alertCancel{ position:absolute; top: 75%; left: 46%; width: 90px; height: 40px; text-align: center; line-height: 40px; background: #2e9cce; color: #fff; cursor:pointer; border-radius:5px; } #alertSure{ top: 75%; left: 46%; } #alertCancel{ top: 75%; left: 74%; } .detail_message{ width:350px; height:115px; text-align:center; overflow: hidden; display:inline-block; padding:10px; margin-left:15px; color:#2b9bc5; } #alertSure:hover,#alertCancel:hover{ background:rgba(118, 206, 247, 0.88); } .alertTitle{ height:30px; background:rgb(114, 209, 255); }js部分：
function alert(e){ // $("body").append("<div id='msg'><span>"+e+"</span></div>"); var html=""; html+="<div class='con'><div id='msg'>"; html+="<div class='info_message'>"; html+="<div class='alertTitle'>提示</div>"; html+="<span class='detail_message'>"+e+"</span>"; html+="</div><div id='alertSure'>确定</div>"; html+="<div id='alertCancel'>取消</div></div></div>" $('body').append(html); clearmsg(); } function clearmsg(){ // var t = setTimeout(function(){ // $("#msg").remove(); // },2000) $('#alertSure').click(function(){ $("#msg").remove(); $('.con').remove(); }) $('#alertCancel').click(function(){ $("#msg").remove(); $('.con').remove(); }) };
