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

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JS实现模态框拖拽动态效果
内容摘要: 结构代码:bodydivclass='login-header'aid='link'href='javascript:;'点击,弹出登录框/a/divdivid='login'class='login'divid='title'class='login-title'登录会员spanaid='closeBtn'href='javascript:void(0);......
结构代码:

<body>

<divclass="login-header"><aid="link"href="javascript:;">点击,弹出登录框</a></div>

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

<divid="title"class="login-title">登录会员

<span><aid="closeBtn"href="javascript:void(0);"class="close-login">关闭</a></span>

</div>

<divclass="login-input-content">

<divclass="login-input">

<label>用户名:</label>

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

</div>

<divclass="login-input">

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

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

</div>

</div>

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

</div>

<!--遮盖层-->

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

<script>

</script>

</body>

样式代码:

<style>

.login-header{

width:100%;

text-align:center;

height:30px;

font-size:24px;

line-height:30px;

}

ul,

li,

ol,

dl,

dt,

dd,

div,

p,

span,

h1,

h2,

h3,

h4,

h5,

h6,

a{

padding:0px;

margin:0px;

}

.login{

display:none;

width:512px;

height:280px;

position:fixed;

border:#ebebebsolid1px;

left:50%;

top:50%;

background:#ffffff;

box-shadow:0px0px20px#ddd;

z-index:9999;

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

}

.login-title{

width:100%;

margin:10px0px0px0px;

text-align:center;

line-height:40px;

height:40px;

font-size:18px;

position:relative;

cursor:move;

}

.login-input-content{

margin-top:20px;

}

.login-button{

width:50%;

margin:30pxauto0pxauto;

line-height:40px;

font-size:14px;

border:#ebebeb1pxsolid;

text-align:center;

}

.login-bg{

display:none;

width:100%;

height:100%;

position:fixed;

top:0px;

left:0px;

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

}

a{

text-decoration:none;

color:#000000;

}

.login-buttona{

display:block;

}

.login-inputinput.list-input{

float:left;

line-height:35px;

height:35px;

width:350px;

border:#ebebeb1pxsolid;

text-indent:5px;

}

.login-input{

overflow:hidden;

margin:0px0px20px0px;

}

.login-inputlabel{

float:left;

width:90px;

padding-right:10px;

text-align:right;

line-height:35px;

height:35px;

font-size:14px;

}

.login-titlespan{

position:absolute;

font-size:12px;

right:-20px;

top:-30px;

background:#ffffff;

border:#ebebebsolid1px;

width:40px;

height:40px;

border-radius:20px;

}

</style>

js代码:

window.onload=function(){

//1.获取元素

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

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

varlink=document.querySelector('#link');

varcloseBtn=document.querySelector('#closeBtn');

vartitle=document.querySelector('#title');

//2.点击弹出层这个链接link让mask和login显示出来

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

login.style.display='block';

mask.style.display='block';

})

//3.点击closeBtn就隐藏mask和login

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

login.style.display='none';

mask.style.display='none';

});

//4.给标题添加一个鼠标按下的事件

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

//获取鼠标在框内的距离

varx=e.pageX-login.offsetLeft;

vary=e.pageY-login.offsetTop;

//5创建移动函数

functionmove(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);

});

});

}

上一篇:js实现模态框的拖拽效果 下一篇:JavaScript实现无缝轮播图的示例
发布日期:2022/7/4
手机扫二维码直达本页
发布时间:18:48:09
点击:108
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022