弹出登录框

最新推荐文章于 2024-07-11 23:15:00 发布

duanyuehuan

最新推荐文章于 2024-07-11 23:15:00 发布

阅读量410

点赞数

本文链接：https://blog.csdn.net/weixin_44380707/article/details/89882606

版权

<div class="login-header">
    <a id="link" href="javascript:void(0);">点击，弹出登录框</a>
</div>
 <div id="login" class="login">
     <div class="header">
         <div></div>
         <div id="close">取消</div>
     </div>
 </div>
 <div id="bg" class="login-bg"></div>
 <script>
 var link=document.getElementById('link');
 var login=document.getElementById('login');
     var bg =document.getElementById('bg');
 link.onclick = function (){
    
     login.style.display='block';
     bg.style.display='block';
 }
 //点击关闭按钮，隐藏登录框和遮盖层
 var close = document.getElementById('close');
 close.onclick = function () {
     login.style.display='none';
     bg.style.display='none';
 }
 login.onmousedown = function(e) {
     var x = e.pageX-login.offsetLeft;
     var y = e.pageY-login.offsetTop;
     document.onmousemove =function (e) {
    var loginX = e.pageX-x;
    var loginY = e.pageY-y;
    login.style.left=loginX+'px';
    login.style.top = loginY+'px';
     }
   }
   document.onmouseup = function (){
       //移除鼠标移动的时间
       document.onmousemove = null;
   }

 </script>