使用jq实现可移动的弹出式窗口

最新推荐文章于 2024-02-05 11:29:35 发布

wingahi

最新推荐文章于 2024-02-05 11:29:35 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jq小技巧文章标签： jq 弹出式窗口可移动弹出式窗口可移动

本文链接：https://blog.youkuaiyun.com/wingahi/article/details/22193763

jq小技巧专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个交互式登录页面的设计与实现过程，通过使用jQuery实现页面元素的动态显示与隐藏，以及用户操作响应，提供了更为流畅的用户体验。重点讨论了登录按钮的交互效果、用户输入验证以及页面元素的位置调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery/jquery-1.11.0.js"></script>
</head>
<body id="bd">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#bt1").click(function () {
                $("#dv").hide();
                $("#dl").fadeIn(1000);
            });
            $("#btc").click(function () {
                $(this).parent("div").fadeOut(1000);
                $("#dv").css("opacity", "1").show();
            });
            var bb = 0;
            $("#dln").mousedown(function () {
                bb = 1;
            });
            $("#dln").mouseup(function () {
                bb = 0;
            });
            var x, y;
            $("#dln").mousemove(function (e) {
                if (bb==1)
                {
                    x = e.clientX;
                    y = e.clientY;
                    $("#dl").css({ left: x, top: y+90 });
                }
            });
        });
    </script>
    <div id="dv" style="width:600px;height:400px;">
    <form id="form1" runat="server">
    <div>
       <input  type="button" id="bt1" value="登陆"/>
    </div>

    </form>   </div>
    <div id="dl" style="top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;opacity:0.8;background-color:silver;display:none;position:absolute;z-index:100;">
        <div id="dln" style="width:100%;height:20px;background-color:yellow">请点击这里移动</div>
        账号： <input type="text"  style="width:100px"/><br />
        密码： <input type="text" style="width:100px" /><br />
        <input type="submit" value="登陆" />
        <input  type="button" value="退出" id="btc"/>
    </div>
</body>
</html>