您正在使用 IPV4 [54.91.19.62] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
js实现响应按钮点击弹出可拖拽的非模态对话框完整实例
内容摘要: !DOCTYPEhtmlhtmllang='zh_CN'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale=1.0'title可拖拽非模态对话框/titlestyle.dialog{display:none;position:absolute;......
<!DOCTYPEhtml>

<htmllang="zh_CN">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>可拖拽非模态对话框</title>

<style>

.dialog{

display:none;

position:absolute;

left:50%;

top:50%;

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

background-color:#fff;

border-radius:5px;

box-shadow:010px20pxrgba(0,0,0,.3);

z-index:9999;

}

.dialog-header{

background-color:#f6f7f8;

padding:10px;

border-top-left-radius:5px;

border-top-right-radius:5px;

cursor:move;

}

.dlgtitle{

font-weight:bold;

font-size:16px;

}

.close-btn{

float:right;

cursor:pointer;

}

.dialog-content{

padding:20px;

}

</style>

</head>

<body>

<buttonid="openBtn">打开对话框</button>

<divid="dialog"class="dialog">

<divclass="dialog-header">

<spanclass="dlgtitle">对话框标题</span>

<spanclass="close-btn">&times;</span>

</div>

<divclass="dialog-content">

<p>这里是对话框内容</p>

</div>

</div>

<script>

vardialog=document.getElementById('dialog');

varopenBtn=document.getElementById('openBtn');

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

varisDragging=false;

varmouseX,mouseY,dialogLeft,dialogTop;

//鼠标按下时记录鼠标位置以及对话框位置

dialogHeaderMouseDown=function(e){

isDragging=true;

mouseX=e.clientX;

mouseY=e.clientY;

dialogLeft=dialog.offsetLeft;

dialogTop=dialog.offsetTop;

}

//鼠标移动时移动对话框

//document.onmousemove=function(e){

dialogHeaderMouseMove=function(e){

if(isDragging){

varmoveX=e.clientX-mouseX;

varmoveY=e.clientY-mouseY;

dialog.style.left=dialogLeft+moveX+'px';

dialog.style.top=dialogTop+moveY+'px';

}

}

//鼠标松开时停止拖动

//document.onmouseup=function(){

dialogHeaderMouseup=function(){

isDragging=false;

}

//点击打开按钮显示对话框

openBtn.onclick=function(){

dialog.style.display='block';

}

//点击关闭按钮或对话框外部关闭对话框

closeBtn.onclick=function(){

dialog.style.display='none';

}

dialog.onclick=function(e){

if(e.target==dialog){

dialog.style.display='none';

}

}

//鼠标按下对话框头部,开始拖动对话框

varheader=document.querySelector('.dialog-header');

header.addEventListener('mousedown',dialogHeaderMouseDown);

header.addEventListener('mousemove',dialogHeaderMouseMove);

header.addEventListener('mouseup',dialogHeaderMouseup);

</script>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:使用css实现水波加载动画效果

 

下一篇:获取鼠标在div中的相对位置的实现代码

发布日期:2023/4/24
手机扫二维码直达本页
发布时间:12:45:59
点  击:10
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....