实现点击按钮弹出登陆框并且可移动操作

骑猪看日落 2022-06-16 10:20 258阅读 0赞

在网页上经常会有当我们点击一个按钮时弹出一个登陆框；一般这个登陆框都是固定在页面可视区中央不可移动，今天分享一个可移动的弹框；  
HTML代码：

<div class="btn"><a href="#">登陆</a></div>
    
    <div class="login">
        <div id="head">
            <h3>用户登陆</h3>
            <span></span>
        </div>
        <div class="login-body">
            <p>登陆界面</p>
            <p class="user">
                账号：<input type="text" />
            </p>
            <p class="pwd">
                密码：<input type="password" />
            </p>
            <p>
                <input type="checkbox" />下次自动登录
                <a href="#">忘记密码</a>
            </p>
            <div class="send"></div>
        </div>
    </div>
    
    <div class="layer"></div>

CSS代码：

*{ margin: 0; padding: 0; }
    .btn{ width: 263px; height: 40px; background: url('../images/but_bg2.jpg') no-repeat 0 0; text-align: center; margin: 10px 20px; line-height: 40px; border: 1px solid #fff; }
    .btn a{ font-size: 16px; text-decoration: none; color: #fff; }
    /* 弹框默认隐藏 */
    .login{ width: 600px; box-shadow: 0 0 10px #efefef; display: none; position: absolute; background: #fff; z-index: 10; }
    #head{ height: 50px; width: 100%; background: orange; }
    #head h3{ color: #fff; line-height: 50px; margin-left: 15px; font-size: 20px; font-weight: normal; letter-spacing: 2px; display: inline-block; }
    #head span{ float: right; background: url("../images/close.png") no-repeat 0 0; width: 17px; height: 18px; margin-top: 16px; margin-right: 10px; cursor: pointer; }
    #head span:hover{ background: url("../images/close.png") no-repeat 0 -18px; }
    .login-body{ width: 570px; margin: 20px auto; }
    .login-body p{ width:100%; text-align: center; }
    .login-body p:nth-of-type(1){ background: url("../images/new.png") no-repeat 0 0; background-size: 30px 30px; text-indent: 40px; line-height: 30px; font-size: 14px; color: #666; text-align: left; }
    .user input,.pwd input{ width: 240px; height: 30px; }
    .user,.pwd{ margin: 15px 0; } 
    .login-body p:nth-of-type(4) a{ display: inline-block; font-size: 14px; margin-left: 60px; }
    .send{ width: 263px; height: 40px; background: url("../images/but_bg1.jpg") no-repeat 0 0; margin: 30px auto; }
    /* 透明黑色背景,默认隐藏 */
    .layer{ background: #333; opacity: 0.4; width: 100%; height: 100%; position: absolute; top: 0; top:0; display: none; }

JS代码：

$(function(){ 
        /*点击按钮弹框和背景层出现*/
        $('.btn').click(function(){ 
            $('.layer').show();
            $('.login').show();
            center();
        });
        /*当窗口大小改变时弹框仍然位于中央*/
        $(window).resize(function(){ 
            center();
        });
        /*点击弹框右上角关闭按钮关闭弹框和背景层*/
        $("#head span").click(function(){ 
            $(".layer").hide();
            $(".login").hide();
        });
        /*使弹框位于中央*/
        function center(){ 
            var left = ( $(window).width() - $(".login").width() )/2;
            var top =( $(window).height() - $(".login").height() )/2;
            $('.login').css({
       'left':left,'top':top});
        }
    
    });
    
    window.onload=function(){ 
        var title = document.getElementById('head');
        move(title);
    }
    /*封装移动函数*/
    function move( obj ){ 
        var onOff=false;
        var l=0,t=0,x=0,y=0;
        var parent = obj.parentNode;
    
        obj.onmousedown=function( event ){ 
            var e =event||window.event;
            x=e.clientX;
            y=e.clientY;
            l=parseInt(parent.offsetLeft);
            t=parseInt(parent.offsetTop);
            onOff=true;
            obj.style.cursor="move";    //此时鼠标形状为可移动手势
            document.onmousemove=function(event){ 
                 if( onOff ){
                    var e =event||window.event;
                    parent.style.left = l+e.clientX-x+'px';
                    parent.style.top = t+e.clientY-y+'px';
    
                 }
            }
            document.onmouseup = function(){ 
                if(onOff){
                    onOff = false;
                }
            };
    
        };
    }