【前端】jq弹出一个透明小提示窗，然后逐渐消失

 

function show_main(content) {
    var showWindow = '<div id="show_main" style="border:1px solid #000000;color: beige;
　　　　　　　　　　　　　　height:40px;width:160px;position:fixed;top:50%;left:50%;
　　　　　　　　　　　　　　margin-left:-80px;margin-top:-20px;z-index:999;border-radius: 7px;
　　　　　　　　　　　　　　text-align:center;line-height:40px;filter:alpha(opacity=30);
　　　　　　　　　　　　　　-moz-opacity:0.3; opacity:0.3;background-color:#000000;">'
　　　　　　　　　　　　 + content + '</div>';
    if ($("#show_main").length != 0) {
        $('#show_main').remove();
    }
    $("body").append(showWindow);

    $("#show_main").fadeOut(2000, removeShow_main);
}
function removeShow_main() {
    var t = setTimeout($('#show_main').remove(), 2500);
}

调用：
<a href="#" onclick="show_main('操作成功！')" >按钮</a>

注解：
1、居中样式：
　　top:50%;
　　left:50%;
　　margin-left:-80px;/*宽度的一半*/
　　margin-top:-20px;/*高度的一半*/
2、透明样式：
　　filter:alpha(opacity=30);
　　-moz-opacity:0.3;
　　opacity:0.3;/*三个均为透明，针对不同的浏览器做兼容，0~1，1为不透明，0完全透明*/

另：
fixed跟absolute很相似，区别为：fixed不会随屏幕滚动，absolute会随屏幕滚动