您正在使用IPV4(3.238.204.31)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
虚位以待
2021年 冬至节 55
2021年 圣诞节 59
2022年 元 旦 66
2022年 春 节 97
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现可拖动模态框
    内容摘要: HTML代码部分:style*{margin:0px;padding:0px;}.login-header{width:100%;text-align:center;height:30px;font-size:24px;line-height:30px;cursor:pointer;}.login{display:none;width:500px;heigh......
    HTML代码部分:

    <style>

    *{

    margin:0px;

    padding:0px;

    }

    .login-header{

    width:100%;

    text-align:center;

    height:30px;

    font-size:24px;

    line-height:30px;

    cursor:pointer;

    }

    .login{

    display:none;

    width:500px;

    height:280px;

    position:fixed;

    border:1px#ebebebsolid;

    left:50%;

    top:50%;

    background:#fff;

    box-shadow:0px0px20px#ddd;

    z-index:999;

    transform:translate(-50%,-50%);

    }

    .login-title{

    width:100%;

    margin:10px0px0px0px;

    text-align:center;

    height:40px;

    line-height:40px;

    font-size:10px;

    position:relative;

    cursor:move;

    }

    .login-titlespan{

    position:absolute;

    font-size:12px;

    right:-20px;

    top:-30px;

    background-color:#fff;

    border:1px#ebebebsolid;

    width:40px;

    height:40px;

    border-radius:20px;

    }

    .login-input-content{

    margin-top:20px;

    }

    .login-button{

    width:100px;

    margin:30pxauto0pxauto;

    line-height:40px;

    font-size:14px;

    border:1px#ebebebsolid;

    text-align:center;

    }

    a{

    text-decoration:none;

    color:#000;

    }

    .login-buttona{

    display:block;

    }

    .login-inputinput.list-input{

    float:left;

    line-height:35px;

    height:35px;

    width:350px;

    border:1px#ebebebsolid;

    text-indent:5px;

    }

    .login-input{

    overflow:hidden;

    margin:0px0px20px0px;

    }

    .login-inputlabel{

    float:left;

    width:90px;

    padding-right:10px;

    height:35px;

    line-height:35px;

    text-align:right;

    font-size:14px;

    }

    .login-mask{

    display:none;

    width:100%;

    height:100%;

    position:fixed;

    top:0px;

    left:0px;

    background-color:rgba(0,0,0,.3);

    }

    </style>

    </head>

    <body>

    <divclass="login-header">点击,弹出登录框</div>

    <divid="login"class="login">

    <divid="title"class="login-title">登录会员<span><aid="closeBtn"class="close-login"href="javascript:void(0);">关闭</a></span></div>

    <divclass="login-input-content">

    <divclass="login-input">

    <label>用户名:</label>

    <inputtype="text"placeholder="请输入用户名"id="username"class="list-input">

    </div>

    <divclass="login-input">

    <label>登录密码:</label>

    <inputtype="password"placeholder="请输入登录密码"id="password"class="list-input">

    </div>

    </div>

    <divid="loginBtn"class="login-button"><aid="login-button-submit"href="javascript:void(0);">登录会员</a></div>

    </div>

    <!--遮罩层-->

    <divid="mask"class="login-mask"></div>

    JS部分:

    <script>

    //1.获取元素

    varlogin=document.querySelector('.login');

    varmask=document.querySelector('.login-mask');

    varloginHeader=document.querySelector('.login-header');

    varcloseBtn=document.querySelector('.close-login');

    varloginTitle=document.querySelector('.login-title');

    //2.点击登录提示让login和mask显示出来;

    loginHeader.addEventListener('click',function(){

    login.style.display='block';

    mask.style.display='block';

    })

    //3.点击关闭按钮隐藏login和mask;

    closeBtn.addEventListener('click',function(){

    login.style.display='none';

    mask.style.display='none';

    })

    //4.拖拽登录框

    //4.1鼠标按下获得鼠标在盒子中的坐标

    loginTitle.addEventListener('mousedown',function(e){

    varx=e.pageX-login.offsetLeft;

    vary=e.pageY-login.offsetTop;

    //4.2鼠标移动的时候,把鼠标在页面中的坐标减去鼠标在盒子中的坐标,得到login盒子的left和top值

    document.addEventListener('mousemove',move)

    functionmove(event){

    login.style.left=event.pageX-x+'px';

    login.style.top=event.pageY-y+'px';

    }

    //4.3鼠标松开的时候,移除移动事件

    document.addEventListener('mouseup',function(){

    document.removeEventListener('mousemove',move)

    })

    })

    </script>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:js将一维数组随机打乱,生成一个新的一维数组 下一篇:JavaScript实现下拉列表选择框
    发布日期:2021/10/11
    手机扫二维码直达本页
    发布时间:14:31:22
    点击:221
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.0.6.10688 Build 21.10.13(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021