使用jquery简单实现弹出框

最新推荐文章于 2025-11-10 09:28:00 发布

原创最新推荐文章于 2025-11-10 09:28:00 发布 · 4.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #对话框

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用jQuery实现点击按钮后显示一个用于修改密码的对话框，并通过CSS进行简单的样式设置。对话框中包含一个关闭按钮，点击该按钮可以隐藏对话框。

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