jQuery可拖拽模态对话框示例_jquery 可移动的模态框-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148006225

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery可拖拽模态对话框示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}

#openDialog {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

#openDialog:hover {
background-color: #45a049;
}

#modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}

#modalDialog {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: white;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1001;
}

#modalHeader {
padding: 15px;
background-color: #4CAF50;
color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: move;
}

#modalContent {
padding: 20px;
}

#modalFooter {
padding: 15px;
text-align: right;
border-top: 1px solid #ddd;
}

#closeDialog {
padding: 8px 16px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

#closeDialog:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<h1>jQuery可拖拽模态对话框示例</h1>
<p>点击下方按钮打开可拖拽的模态对话框</p>
<button id="openDialog">打开对话框</button>


<div id="modalOverlay"></div>
<div id="modalDialog">
<div id="modalHeader">
<h2>可拖拽对话框</h2>
</div>
<div id="modalContent">
<p>这是一个使用jQuery实现的可拖拽模态对话框。</p>
<p>你可以拖动标题栏来移动对话框位置。</p>
<p>更多示例请访问: <a href="http://www.1sf.monster" target="_blank">http://www.1sf.monster</a></p>
</div>
<div id="modalFooter">
<button id="closeDialog">关闭</button>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 打开对话框
$("#openDialog").click(function() {
$("#modalOverlay").fadeIn(200);
$("#modalDialog").fadeIn(200);
});

// 关闭对话框
$("#closeDialog, #modalOverlay").click(function() {
$("#modalOverlay").fadeOut(200);
$("#modalDialog").fadeOut(200);
});

// 阻止点击对话框内容时关闭
$("#modalDialog").click(function(e) {
e.stopPropagation();
});

// 实现拖拽功能
let isDragging = false;
let offsetX, offsetY;

$("#modalHeader").mousedown(function(e) {
isDragging = true;
offsetX = e.clientX - $("#modalDialog").offset().left;
offsetY = e.clientY - $("#modalDialog").offset().top;
});

$(document).mousemove(function(e) {
if (!isDragging) return;

let left = e.clientX - offsetX;
let top = e.clientY - offsetY;

// 限制对话框不超出视口
let maxLeft = $(window).width() - $("#modalDialog").outerWidth();
let maxTop = $(window).height() - $("#modalDialog").outerHeight();

left = Math.max(0, Math.min(left, maxLeft));
top = Math.max(0, Math.min(top, maxTop));

$("#modalDialog").css({
left: left + "px",
top: top + "px",
transform: "none" // 移除初始的居中transform
});
});

$(document).mouseup(function() {
isDragging = false;
});
});
</script>
</body>
</html>