用js实现模态框效果

最新推荐文章于 2024-05-12 18:06:44 发布

偲楠爱前端

最新推荐文章于 2024-05-12 18:06:44 发布

阅读量1k

点赞数 2

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/ChenHN98/article/details/120977879

版权

难点：

隐藏和现实各个盒子
为具体盒子绑定具体事件
在鼠标拖动时登录框对浏览器的距离和鼠标离开时的距离

最终效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: black;
        }
        .login {
            text-align: center;
        }
        .login  a {
               font-size: 30px;
               font-weight: 20px;
               color: black;     
               
        }
        .backG {
            display: none;
            background-color: rgba(0,0,0, .3);
           width: 100%;
           height: 100%;
           position: fixed;
           top: 0;
           left: 0;

        }
        .login-denglu {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 350px;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 0px 0px 20px black;
            transform: translate(-50%,-50%);
            z-index: 999;
        }
        .zhongxin{
                width: 100%;
                text-align: center;
                cursor: move;
            }
        .login-denglu .tuichu {
            position: absolute;
            top: -25px;
            right: -25px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50px;
            box-shadow: 0px 0px 10px black;
            background-color: aliceblue;
        }
        input {
            outline: none;
            width: 270px;
            height: 30px;
            font-size: 20px;
            border: 1px solid #ccc;
        }
        .gonggong {
            width: 100%;
            margin-top: 60px;
        }
        label {
            display: inline-block;
            width: 100px;
            text-align: justify;
            text-align: center;
            margin-right: 10px;
            font-size: 20px; 
        }
        .dengluhuiyuan {
            width: 100%;
            margin-top: 40px;
            text-align: center;
        }
        button {
            width: 200px;
            height: 30px;
            font-size: 20px;
            border: 1px solid #ccc;
            text-align: center;
            cursor: pointer;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="login"><a href="javascript:;" id="aone">点击,弹出登录框</a></div>
    <div class="login-denglu">
        <div class="tuichu"><a href="javascript:;" id="atwo">退出</a></div> 
        <div class="zhongxin"><h1>会员中心</h1></div>
        <div class="yonghu gonggong" ><label for="">用户名:</label><input type="text" placeholder="请输入用户名"></div>
        <div class="mima gonggong"><label for="">密码: </label><input type="password" placeholder="请输入密码"></div>
        <div class="dengluhuiyuan"><button>确认登录</button></div>
    </div>
    <div class="backG"></div>
    <script>
        var aone=document.querySelector('#aone');
        var logindenglu=document.querySelector('.login-denglu');
        var backG=document.querySelector('.backG');
        var atwo=document.querySelector('#atwo');
        var zhongxin=document.querySelector('.zhongxin');
        //隐藏和出现遮蔽层和登录界面
        aone.addEventListener('click',function () {
            backG.style.display='block';
            logindenglu.style.display='block';
        })
        atwo.addEventListener('click',function () {
            backG.style.display='none';
            logindenglu.style.display='none';
        })


       zhongxin.addEventListener('mousedown',function (e) {
        //求出鼠标距离登录框左和上固定距离
           var x=e.pageX-logindenglu.offsetLeft;
           var y=e.pageY-logindenglu.offsetTop;
           
          document.addEventListener('mousemove',move)
          //用到移除 所以将方法写在外面
          function move (e) {
              logindenglu.style.left=e.pageX-x+'px';//e.page求出现在鼠标距页面距离减去固定距离就为登录界面现在距离
              logindenglu.style.top=e.pageY-y+'px';//e.page求出现在鼠标距页面距离减去固定距离就为登录界面现在距离
          }
          document.addEventListener('mouseup',function () {
              document.removeEventListener('mousemove',move)//移除事件
          })
        })

      
    </script>
</body>
</html>

偲楠爱前端

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用js实现模态框效果

难点：隐藏和现实各个盒子为具体盒子绑定具体事件在鼠标拖动时登录框对浏览器的距离和鼠标离开时的距离最终效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...
复制链接

扫一扫