JavaScript网页制作--拖动模态框

r囧r小猫 2022-12-27 08:35 263阅读 0赞

# JavaScript网页制作–拖动模态框 #

在注册页面，经常会有点击注册弹出一个注册框的情况，有时注册框遮挡住下面信息，需要看到下面信息时，可以拖动注册框。（初学JS，这部分主要做的是拖动框架，在前面的css部分做的并不是很好，望各位看官海涵）

网页打开后，出现点击弹出登录框的页面

![在这里插入图片描述][20201209153118962.png_pic_center]

点击之后，出现登录的页面（本来想法是，之前的那句话还在页面下，事不过被一个半透明的图层盖住了，但是做不大明白，在出来这个后把文字隐藏了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

按下粉红色区域任何地方，拖动，登录框都会跟着拖动。

程序实现：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>拖动模态框</title>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            
            
            .bg {
         
                display: none;
                float: left;
                z-index:auto;
                width: 100%;
                height: 100vh;
                background-color:rgba(0, 0, 0, 0.5);
    
            }
            .dian1 {
         
    
                width: 200px;
                height: 60px;
                margin: auto;
            }
            .bg .dian2 {
         
    
                width: 200px;
                height: 60px;
                margin: auto;
    
    
            }
    
             .login {
           
                display: none;
                position: relative;
                width: 300px;
                height: 200px;
                background-color: white;
                left: 575px;
                top: 200px;
            }
            .login .d{
         
                background-color: pink;
                width: 300px;
                height: 50px;
                text-align: center;
                line-height: 50px;
            }
            .login .uname {
         
                height: 50px;
    
                text-align: center;
                line-height: 50px;
            }
            .login .pwd {
         
                height: 50px;
                margin-left: 40px;
    
                line-height: 50px;
            }
            .login .dl {
         
                margin-left: 120px;
            }
            .login .close {
         
                position: absolute;
                width: 40px;
                height: 40px;
                top: -15px;
                right: -15px;
                text-align: center;
                line-height: 40px;
                border-radius: 15px;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div class='dian1'><h2>点击，弹出登录框</h2></div>
        <div class='bg'>
            
            <div class='login'>
                <div class='d'>登录会员</div>
                <div class='uname'>用户名:<input type="text"></div>
                <div class='pwd'>密     码:<input type="password"></div>
                <div class='dl'><button>登录会员</button></div>
                <div class="close">关闭</div>
            </div>
        </div>
    
    
        <script>
    
            var dian1 = document.querySelector('.dian1');
            var bg = document.querySelector('.bg');
            var login = document.querySelector('.login');
            //鼠标放在登录文字上鼠标样式改变
            dian1.addEventListener('mouseover',function(){
         
                dian1.style.cursor='pointer';
            })
            //鼠标点击登录文字出现登录框
            dian1.addEventListener('click',function(){
         
                dian1.style.display='none';
                bg.style.display='block';
                login.style.display='block';
            })
    
            var close1 = document.querySelector('.close');
            //鼠标放在关闭上，鼠标样式改变
            close1.addEventListener('mouseover',function(){
         
                close1.style.cursor='pointer';
            })
            //鼠标点击关闭盒子，登录框消失
            close1.addEventListener('click',function(){
         
                dian1.style.display='block';
                bg.style.display='none';
                login.style.display='none';
            })
    
            var d = document.querySelector('.d');
            //鼠标放在登录会员上，鼠标样式改变
            d.addEventListener('mouseover',function(){
         
                d.style.cursor = 'move';
            })
            //鼠标按下事件
            d.addEventListener('mousedown',function(e){
         
                var x = e.pageX - login.offsetLeft;
                var y = e.pageY - login.offsetTop;
                //拖动鼠标，移动login
                function move (e){
         
                    login.style.left =  e.pageX - x +'px';
                    login.style.top = e.pageY - y +'px';
                }
                document.addEventListener('mousemove',move)
                //鼠标弹起，清除事件
                document.addEventListener('mouseup',function(){
         
                    document.removeEventListener('mousemove',move)
                })
            })
            
    
    
        </script>
    </body>
    </html>

[20201209153118962.png_pic_center]: /images/20221120/aa01f935d0c54890ae05b7d8ec00d57f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b645603652684302846a036800ac99d0.png