<!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">×</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>
|