<!--背景层div-->
<div id="bgbox"></div>

<!--弹出内容div-->
<div id="contentbox">
    <div class="title">标题 - 酷虾米 ( kuxiami.com ）</div>
    <div class="content">提示框内容</div>
</div>

<!--弹出，也可以其他条件触发-->
<a href="javascript:tips_show();">点击弹出</a>
<br/>

<!--JQ-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<!--css-->
<style>
    #bgbox{
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        background:#000;
        display:none;
    }
    #contentbox{
        position:absolute;
        top:50%;
        left:50%;
        width:500px;
        height:300px;
        margin-top:-150px;
        margin-left:-250px;
        background:#fff;
        border-radius:10px;
        display:none;
    }
    #contentbox .title{
        height:40px;
        line-height:40px;
        padding-left:20px;
        background: #0c5d20;
        color:#fff;
        border-radius:10px 10px 0px 0px;
    }
    #contentbox .content{
        margin:20px;
    }
</style>

<!--JS-->
<script>
    $(function(){
        $('#bgbox')
            .css("opacity","0.5")//设置背景透明度
            .click(function(){//点击背景让整个弹出层消失
                tips_hide();
            });
    })
    function tips_show(){//显示弹出层
        $('#bgbox').show();
        $('#contentbox').show();
    }

    function tips_hide(){//隐藏弹出层
        $('#bgbox').hide();
        $('#contentbox').hide();
    }
</script>