模态框的拖拽效果

最新推荐文章于 2023-05-12 14:42:08 发布

relief�

最新推荐文章于 2023-05-12 14:42:08 发布

阅读量131

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44406282/article/details/109692201

版权

HTML CSS 登录界面响应式设计拖拽效果

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
          padding: 0;
          margin: 0;
        }
        .login-header {
            text-align: center;
          font-weight: 700;
          font-size: 18px;
        }
        .login {
          display: none;
          width: 512px;
          height: 280px;
          position: fixed;
          border: #ebebeb solid 1px;
          left: 50%;
          top: 50%;
          background: #fff;
          box-shadow: 0px 0px 20px #ddd;
          z-index: 9999;
          transform: translate(-50%, -50%);
        }
        .login-title {
          width: 100%;
          margin: 10px 0px 0px 0px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          font-style: 18px;
          position: relative;
          cursor: move;
        }
        .login-input-content {
          margin-top: 20px;
        }
        .login-button {
          width: 50%;
          margin: 0px auto 0px auto;
          line-height: 40px;
          border: #ebebeb 1px solid;
          text-align: center;
          cursor:pointer;
        }
        .login-bg {
          display: none;
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0px;
          left: 0px;
          background: rgba(0, 0, 0, 0.3);
          z-index: 100;
        }
        a {
          text-decoration: none;
          color: #000000;
        }
        .login-button a {
          display: block;
        }
        .login-input input.list-input {
          float: left;
          line-height: 35px;
          height: 35px;
          width: 350px;
          border: #ebebeb 1px solid;
          text-indent: 5px;
        }
        .login-input {
          overflow: hidden;
          margin: 0px 0px 20px 0px;
        }
        .login-input label {
          float: left;
          width: 90px;
          padding-right: 100px;
          text-align: right;
          line-height: 35px;
          height: 35px;
          font-style: 14px;
        }
        .login-title span {
          position: absolute;
          font-style: 12px;
          right: -20px;
          top: -30px;
          background: #fff;
          border: #ebebeb solid 1px;
          width: 40px;
          height: 40px;
          border-radius: 20px;
        }
      </style>
</head>
<body>
    <div class='login-header'><a id='link' href='javascript:;'>点击,弹出登录框</a></div>
    <div id="login" class="login">
    <div id='title' class='login-title'>
        登陆会员
        <span><a id='closeBtn' href='javascript:void(0);' class='close-login'>关闭</a></span>
    </div>
    <div class='login-input-content'>
        <div class='login-input'>
            <label>用户名：</label>
            <input type='text' placeholder='请输入用户名' name='info[username]' id='username' class="username">
        </div>
        <div class='login-input'>
            <label>登陆密码：</label>
            <input type='password' placeholder='请输入密码' name='info[password]' id='password' class='password'>
        </div>
    </div>
    <div id='loginBtn' class='login-button'>登陆会员<a href='javascirpt:void(0);' id='login-button-submit' class="login-button"></a>
</div></div>
<!-- 遮罩层 -->
<div id='bg' class='login-bg'></div>
</body>
<script>
    //获取元素
    var login=document.querySelector('.login');
    var mask=document.querySelector('.login-bg');
    var link=document.querySelector('#link');
    var closeBtn=document.querySelector('#closeBtn');
    //点击弹出层这个链接 link 让mask 和login 显示出来
    link.addEventListener('click',function() {
         login.style.display='block';  
         mask.style.display='block';
        })
    var titie=document.querySelector('.title');
    //关闭键
    closeBtn.addEventListener('click',function() {
        mask.style.display='none';
        login.style.display='none'; 
    })
     //拖拽效果
     //鼠标按下获得盒子内坐标
     title.addEventListener('mousedown',function(e){
        var x=e.pageX-login.offsetLeft;
        var y=e.pageY-login.offsetTop;
        //鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是框的坐标
        document.addEventListener('mousemove',move)
        function move(e){
            
            login.style.left=e.pageX-x+'px';
            login.style.top=e.pageY-y+'px';
        }
        //鼠标弹起
        document.addEventListener('mouseup',function() {
            document.removeEventListener('mousemove',move)
        })
     })

</script>

</body>
</html>

relief�

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模态框的拖拽效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style>
复制链接

扫一扫