jQuery与HTML自制弹出框

html自带的弹出框显示不友好，故使用jQuery在网页中自制弹出框。

代码如下：

<!--自制弹出框-->
    <a href="javascript:void();" οnclick="show()">弹出框</a>
    <div class="pop-main" id="pop_div_lzg">
    <div class="pop-header">
        <span>温馨提示</span>
    </div>
    <div class="pop-con">
        <p class="pop-text">弹出成功</p>
        <a href="javascript:void();" class="cancel-btn" οnclick="hide()">关闭</a>
    </div>
    </div>
    <style type="text/css">
        .pop-main{
            width:300px;
            height:160px;
            position: fixed;
            left:50%;    
            margin-left:-150px;
            top:50%;
            margin-top:-160px;
            border:4px solid rgba(0,0,0,0.1);
            border-radius:5px;
            display:none;
            overflow: hidden;        
            z-index:10001;
            padding: 0;
            color:#666666;
            font:12px/150% microsoft yahei;
        }
        .pop-header{
            background:#f7f7f7 none repeat scroll 0 0;
            color:#666;
            font-family:"Microsoft YaHei";
            font-size:14px;
            height:36px;
            line-height:36px;
            padding:0 10px;
            position: relative;
            cursor:auto;
        }
        .pop-con{
            padding:10px 50px 10px 50px;
            background:#fff none repeat scroll 0 0;
            min-height:80px;
            position:relative;
            text-align:center;
            cursor:auto;
            color:#666666;
            font:12px/150% microsoft yahei;
        }
        .pop-text{
            color:#ff9194;
            font-size:18px;
            font-weight:bold;
            line-height:1.5em;
            text-align:center;
            cursor:auto;
            width:200px;
        }
        .cancel-btn{
            background: #f5f5f5 none repeat scroll 0 0;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
            display: inline-block;
            height: 28px;
            line-height: 28px;
            padding: 0 10px;
            vertical-align: top;
        }
    </style>

    <script type="text/javascript" src="jquery-1.6.2.min.js">
    </script>
    <script type="text/javascript">
        function show(){
            $('#pop_div_lzg').show();
            /*加入自己的逻辑代码*/
        }
        function hide(){
            $('#pop_div_lzg').hide();
            /*加入自己的逻辑代码*/
        }
    </script>