JavaScript登陸彈窗，可拖拽

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!doctype html><html><head><meta charset="utf-8"><title>JavaScript登陸彈窗，可拖拽</title><style type="text/css">* { margin:0; padding:0; }#box { width:400px; height:200px; background:#f9f9f9; border:1px solid #ccc; position:absolute; left:50%; top:50%; margin:-100px 0 0 -200px; border-radius:4px; box-shadow:0 0 15px #ddd; }.title { padding:10px 20px; background-color:#f1f1f1; border-bottom:1px solid #ddd; font-size:14px; color:#333; }.login { padding:30px 0 0 50px; }.login p { margin-bottom:10px; font-size:14px; }.login input.text { width:200px; padding:5px; border:1px solid #ddd; vertical-align:middle; }.login input.btn { width:70px; padding:6px; border:1px solid #ddd; margin-left:41px; cursor:pointer; }</style></head><body><div id="box">    <h2 class="title">使用者登入</h2>    <div class="login">    <form action="">        <p><label>賬戶：</label><input type="text" name="" id="" class="text"></p>        <p><label>密碼：</label><input type="text" name="" id="" class="text"></p>        <p><input type="submit" name="" id="" value="提 交" class="btn"></p>    </form>    </div></div><script type="text/javascript">window.onload = function(){    var oBox = document.getElementById("box");    var oBtn = oBox.getElementsByTagName("h2")[0];    var disX = 0;    var disY = 0;    oBtn.onmousedown = function(ev){        var oEvent = ev||event;        disX = oEvent.clientX-oBox.offsetLeft;        disY = oEvent.clientY-oBox.offsetTop;        oBox.style.cursor = "crosshair";        document.onmousemove = function(ev){            var oEvent = ev||event;            var l = oEvent.clientX-disX;            var t = oEvent.clientY-disY;            oBox.style.margin = 0;            if(l<0){                l=0;            }else if(l>document.documentElement.clientWidth-oBox.offsetWidth){                l=document.documentElement.clientWidth-oBox.offsetWidth;            }            if(t<0){                t=0;            }else if(t>document.documentElement.clientHeight-oBox.offsetHeight){                t=document.documentElement.clientHeight-oBox.offsetHeight;            }            oBox.style.left = l+"px";            oBox.style.top = t+"px";        }        document.onmouseup = function(){            document.onmousemove = null;            document.onmouseup = null;            oBox.style.cursor = "default";        }        return false;    }    window.onresize = function(){        if(oBox.offsetLeft>document.documentElement.clientWidth-oBox.offsetWidth){            oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+"px";        }        if(oBox.offsetTop>document.documentElement.clientHeight-oBox.offsetHeight){            oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+"px";        }    }}</script></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More