本文介绍如何使用 JavaScript 制作一个支持拖拽且始终居中的弹出层。核心思路是通过监听窗口大小变化，动态计算并更新弹出层的 left 和 top 属性，使其随宽度变化保持居中。同时结合鼠标事件实现拖拽交互，代码示例展示了关键逻辑的实现方式。
实现可拖拽的居中弹出层
目标：实现一个具备拖拽功能且始终位于屏幕中央的弹出层，类似常见的提示框效果。
初步代码编写完成一半，后续逻辑将在后续步骤中完善。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } </style> </head> <body> </body> </html>点击界面右下角的“OPEN”按钮触发弹出层。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style> </head> <body> open </body> </html>关于代码中每一步的具体实现原理，将在文末进行详细解释。目前代码尚未完全整理完毕。
在实现过程中，曾对“从中间向外扩展”的缓冲动画算法感到困惑。
经过分析，该效果实际上并不复杂。
关键在于让 div 元素的 left 和 top 属性随着 width 的变化进行渐变计算，从而始终保持居中状态。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stri" /> <title>javascript 弹出层居中效果的制作</title> <style type="text/css"> * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:380px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f7; position:absolute; padding:10px; z-index:9999; } a.btn { display:block; width:80px; cursor:pointer; background-color:#f7f7f7; padding:2px 0px; border:1px solid #d5d5d5; vertical-align:middle; text-align:center; margin:50px auto 5px; text-decoration:none; } a:hover { background-color:#333; color:#fff; font-weight:bold; } #aa { position:fixed; bottom:20px; right:10px; } </style> </body> </html>