使用jquery简单实现弹出框

使用jquery实现点击按钮弹出对话框

html:

<input type="button" id="btn02" value="修改密码" >
        <div id="div">
            <p class="exit">x</p><br>
            <div>
                <form action="">
                    原密码<input type="password" name="init_passwd"><br>
                    新密码<input type="password" name="new_passwd"><br>
                    确认密码<input type="password" name="again_new_passwd">

                </form>
            </div>

        </div>

css样式:

<style type="text/css">
        #div{
            margin:0 auto;
            background: #eef;
            width:200px;
            height:500px;
            display:none;
        }
        p{
            background:#999;
            width:20px;
            height:20px;
            cursor:pointer;
            text-align:center;
            line-height:20px;
            border-radius:50%;
            margin-left:180px;

        }
    </style>

jquery语句:

<script type="text/javascript">
    $(function(){
        $("#btn02").click(function(){
            $("#div").show(200);
        });

        $(".exit").click(function(){
            $("#div").hide(200,"linear");
        });
        $(".exit").mouseover(function(){
            $(this).css("background","blue");
        });
        $("p").mouseout(function(){
            $(this).css("background","#999");
        });
    });
    </script>

点击修改密码,弹出修改密码对话框,点击对话框右上角的叉,会关闭.