一个不错的弹出窗口的js效果(值的收藏)

一个不错的弹出窗口的js效果(值的收藏)

< script type = " text/javascript "  language = " javascript " >
// more javascript from  http://www.smallrain.net
function sAlert(str){
var msgw,msgh,bordercolor;
msgw = 400 ; // 提示窗口的宽度
msgh = 100 ; // 提示窗口的高度
titleheight = 25   // 提示窗口标题高度
bordercolor = " #c51100 " ; // 提示窗口的边框颜色
titlecolor = " #c51100 " ; // 提示窗口的标题颜色

var sWidth,sHeight;
sWidth = screen.width;
sHeight = screen.height;

var bgObj = document.createElement( " div " );
bgObj.setAttribute( ' id ' , ' bgDiv ' );
bgObj.style.position = " absolute " ;
bgObj.style.top = " 0 " ;
bgObj.style.background = " #cccccc " ;
bgObj.style.filter = " progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75 " ;
bgObj.style.opacity = " 0.6 " ;
bgObj.style.left = " 0 " ;
bgObj.style.width = sWidth  +   " px " ;
bgObj.style.height = sHeight  +   " px " ;
bgObj.style.zIndex  =   " 10000 " ;
document.body.appendChild(bgObj);

var msgObj = document.createElement( " div " )
msgObj.setAttribute( " id " , " msgDiv " );
msgObj.setAttribute( " align " , " center " );
msgObj.style.background = " white " ;
msgObj.style.border = " 1px solid  "   +  bordercolor;
msgObj.style.position  =   " absolute " ;
msgObj.style.left  =   " 50% " ;
msgObj.style.top  =   " 50% " ;
msgObj.style.font = " 12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif " ;
msgObj.style.marginLeft  =   " -225px "  ;
msgObj.style.marginTop  =   - 75 + document.documentElement.scrollTop + " px " ;
msgObj.style.width  =  msgw  +   " px " ;
msgObj.style.height  = msgh  +   " px " ;
msgObj.style.textAlign  =   " center " ;
msgObj.style.lineHeight  = " 25px " ;
msgObj.style.zIndex  =   " 10001 " ;

var title = document.createElement( " h4 " );
title.setAttribute( " id " , " msgTitle " );
title.setAttribute( " align " , " right " );
title.style.margin = " 0 " ;
title.style.padding = " 3px " ;
title.style.background = bordercolor;
title.style.filter = " progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); " ;
title.style.opacity = " 0.75 " ;
title.style.border = " 1px solid  "   +  bordercolor;
title.style.height = " 18px " ;
title.style.font = " 12px Verdana, Geneva, Arial, Helvetica, sans-serif " ;
title.style.color = " white " ;
title.style.cursor = " pointer " ;
title.innerHTML = " 关闭 " ;
title.onclick = function(){
document.body.removeChild(bgObj);
document.getElementById( " msgDiv " ).removeChild(title);
document.body.removeChild(msgObj);
}
document.body.appendChild(msgObj);
document.getElementById( " msgDiv " ).appendChild(title);
var txt = document.createElement( " p " );
txt.style.margin = " 1em 0 "
txt.setAttribute( " id " , " msgTxt " );
txt.innerHTML = str;
document.getElementById( " msgDiv " ).appendChild(txt);
}
</ script >




< input type = " button "  value = " 点击这里 "  onclick = " sAlert('test弹窗效果'); "   />