本文介绍如何使用JavaScript实现点击按钮弹出Div层，并赋予该弹窗可拖曳交互的功能。通过结合HTML结构、CSS样式定位以及JS事件监听，完成从点击触发到鼠标拖动移动弹窗的完整前端交互逻辑，适用于需要轻量级提示或操作面板的场景。
HTML结构与CSS样式基础
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>弹出层、弹窗效果+拖曳功能 </title> <style type="text/css"> *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; padding:20px 25px; background:#fff} #cwxBg{ position:absolute; display:none; background:#000; width:100%; height:100%; left:0px; top:0px; z-index:1000;} #cwxWd{ position:absolute; display:none; border:10px solid #CCC; padding:10px;background:#FFF; z-index:1500;} #cwxCn{ background:#FFF; display:block;} .imgd{ width:400px; height:300px;} </style> </head> <body> <!--弹出窗--> <div class="mybody"> <div class="botton" id="testClick">点击测试</div> asdasdasdasdasdasdasd这里是一段文字哦！<div class="botton" id="testClick1">点击测试</div> </div> </body> </html> 外部脚本加载注意事项
注意：若代码中引入了外部JavaScript文件，必须在页面完全加载刷新后，相关脚本才能正常执行生效。