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

来源：互联网发布：淘宝评价多久生效编辑：程序博客网时间：2024/05/16 10:39
<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>
0 0