我在制作网页编写脚本的时候，少不了利对alert()方法来弹出各式各样的信息，但是不同厂家发布的浏览器对alert弹出框的样式是不同的，有的浏览器的弹出框非常的好的，而有的浏览器弹出框的样式惨不忍堵，今天由于把YT用户中心(百描)插件的弹出框美化了一下，并把代码发布出来，以后备用。

alert()美化的原理

1、我们构建一个函数，并可以传入变量

2、制作弹出层，弹出信息

3、美化弹出层

4、添加点击事件到里面去具体代码，可在下面的附件下载中下载！

代码如下：function g_alert(type,cont,url){

//定义弹出层

var html = '

';

var html2 ='

';

//定义CSS

var css = "

css += "#g_cont{padding:30px 0; text-align:center;}";

css += "#g_msg{font-size:16px;margin-left:20px;}";

css += "#g_buttom{height:60px;border-top:1px solid #eef0f1; border-radius:0 0 10px 10px;line-height:60px;}";

css += "#g_button{width:200px; height:100%; margin-right:10px; float:right;}";

css += ".butt{display:block;margin-top:12px;cursor:pointer; float:left;width:95px;height:35px;line-height:35px;text-align:center;color:#fff;border-radius:5px;}"

css += "#ok{background:#0095d9; float:right;}";

css += "#false{background:#546a79; float:left;}";

css +=".g_cont{padding:10px 20px;;border-radius:10px;;text-align:center;border: 1px solid #bbb;background:#fff;}";

css += "#g_box{width:550px;border:1px solid #bbb;border-radius:10px;background:#fff;}";

//插入CSS

$('head').append(css);

//正角提示

if(type == 'success'){

$('body').append(html);

$('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/ok.png');

$('#false').hide();

}

//错误提示

if(type == 'error'){

$('body').append(html);

$('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/fail.png');

$('#false').hide();

}

//警告提示

if(type == 'warn'){

$('body').append(html);

$('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/warn.png');

$('#false').hide();

}

//询问提示

if(type == 'confirm'){

$('body').append(html);

$('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/confirm.png');

}

//正确提示，没有事件，3秒后消失

if(type == 'skipok'){

$('body').append(html2);

$('.g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/sok.png');

setTimeout(removediv, 3000);

}

//错误提示，没有事件，3秒后消失

if(type == 'skipwarn'){

$('body').append(html2);

$('.g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/swarn.png');

setTimeout(removediv, 3000);

}

//弹出层消失函数

function removediv(){

$('#g_all').remove();

$('#g_box').remove();

$('#g_css').remove();

$('#g_box2').remove();

return false;

}

//确定按钮事件

$('#ok').click(function(){

removediv();

if(url){

window.location = url;

}

return true;

});

//取消按钮事件

$('#false').click(function(){

removediv();

if(type != 'confirm'){

if(url){

window.location = url;

}}

return false;

});

//定位弹出层在窗口的位置

var _widht = document.documentElement.clientWidth;

var _height = document.documentElement.clientHeight;

var boxWidth = $("#g_box").width();

var boxHeight = $("#g_box").height();

var boxWidth2 = $("#g_box2").width();

var boxHeight2 = $("#g_box2").height();

$("#g_box").css({ top: (_height - boxHeight) / 4 + "px", left: (_widht - boxWidth) / 2 + "px" });

$("#g_box2").css({ top: (_height - boxHeight2) / 2 + "px", left: (_widht - boxWidth2) / 2 + "px" });

}

我这里不发图标了，各位自己制作即可，或在一些素材网站进行下载

alert()美化的调用方法方法

代码：g_alert(''错误类型,'提示内容','事件跳转网址可选');

注：

1、URL地址只在确定事件才会生效

2、skipok，skipwarn事件，不可调用地址

以下为演示图片：

错误演示

正确演示

js alert美化插件源码，带说明平台 : 所有平台  |  分类 : 编程开发  |  大小 : 0.26 MB

注：代码来源网络，经过二次修改开发，测试正常！