我在制作網頁編寫腳本的時候，少不了利對alert()方法來彈出各式各樣的信息，但是不同廠家發布的瀏覽器對alert彈出框的樣式是不同的，有的瀏覽器的彈出框非常的好的，而有的瀏覽器彈出框的樣式慘不忍堵，今天由于把YT用戶中心(百描)插件的彈出框美化了一下，并把代碼發布出來，以后備用。

alert()美化的原理

1、我們構建一個函數，并可以傳入變量

2、制作彈出層，彈出信息

3、美化彈出層

4、添加點擊事件到里面去具體代碼，可在下面的附件下載中下載！

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

//定義彈出層

????var?html?=?'

提示'+cont+'確定?取消';

????var?html2?='

'+cont+'';

//定義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

注：代碼來源網絡，經過二次修改開發，測試正常！

總結

以上是生活随笔為你收集整理的js alert追加html,利用JQ来美化Js的alert弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。