使用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>

點選修改密碼,彈出修改密碼對話方塊,點選對話方塊右上角的叉,會關閉.