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

最新推荐文章于 2021-01-26 16:00:38 发布

wingahi

最新推荐文章于 2021-01-26 16:00:38 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/wingahi/article/details/22193763

版权

jq小技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

wingahi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jq实现可移动的弹出式窗口

$(document).ready(function () { $("#bt1").click(function () { $("#dv").hide(); $("#dl").fadeIn(1000); }); $("#btc").click(function (
复制链接

扫一扫