Categories: JavaScript

[JS] 簡單幾行實現 jgrowl 效果

呼，原本想裝 jgrowl 套件在新的案子上

不過想說已經裝了 Jquery ui 跟 Jquery Wijmo ，感覺已經很重了，所以自己花時間整了一個函式

最好配合一下 jquery ui ，不然會不好看

function set_dialog(type,message)
{
if( $('#flash-dialog').size() == 0){
$('body').append('<div id="flash-dialog"></div>')
}
var class_name = (type) ? 'ui-corner-all flash-dialog ui-state-hover':'ui-corner-all flash-dialog ui-state-error';
$('<div/>').html(message).attr('class',class_name).appendTo('#flash-dialog').fadeOut(3000, function(){
$(this).remove();
if( $('.flash-dialog').size() == 0){
$('#flash-dialog').remove();
}
})
}

CSS 部分

.flash-dialog{
width: 200px;
padding: 20px;
margin: 0 auto;
text-align:center;
}
#flash-dialog{
text-align:center;
position:absolute;
width: 100%;
padding: 20px;
top:&nbsp;&nbsp;0px;
left:&nbsp;&nbsp;0px;
}

程式碼的部分，只需要叫出 set_dialog function 就可以了

set_dialog( (true/false) , message )

範例網站:
http://jsfiddle.net/73VLM/

範例程式:

Mesak

我是米薩克，想了解更多可以點選關於我