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

最新推荐文章于 2022-09-05 20:23:46 发布

我是Dreamer啊

最新推荐文章于 2022-09-05 20:23:46 发布

阅读量286

点赞数 2

分类专栏：前端开发文章标签： css html js javascript

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/110927355

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

JavaScript网页制作–拖动模态框

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

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

在这里插入图片描述

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

在这里插入图片描述

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

程序实现：

<!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='dian2'><h2>点击，弹出登录框</h2></div> -->
        <div class='login'>
            <div class='d'>登录会员</div>
            <div class='uname'>用户名:<input type="text"></div>
            <div class='pwd'>密   &nbsp;&nbsp;码:<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>

我是Dreamer啊

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript网页制作--拖动模态框

JavaScript网页制作–拖动模态框在注册页面，经常会有点击注册弹出一个注册框的情况，有时注册框遮挡住下面信息，需要看到下面信息时，可以拖动注册框。（初学JS，这部分主要做的是拖动框架，在前面的css部分做的并不是很好，望各位看官海涵）网页打开后，出现点击弹出登录框的页面点击之后，出现登录的页面（本来想法是，之前的那句话还在页面下，事不过被一个半透明的图层盖住了，但是做不大明白，在出来这个后把文字隐藏了。按下粉红色区域任何地方，拖动，登录框都会跟着拖动。程序实现：<!DOCTYPE
复制链接

扫一扫

专栏目录