JavaScript实现可拖曳弹窗层：点击显示与拖动交互

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文件，必须在页面完全加载刷新后，相关脚本才能正常执行生效。