JS弹出可以移动的DIV
2015-12-09 09:46
537 查看
html代码如下: <html> <head> <title>可拖动DIV</title> <script type="text/javascript"> function showProc(){ message_box.style.visibility='visible'; //创建灰色背景层 procbg = document.createElement("div"); procbg.setAttribute("id","mybg"); procbg.style.background = "#000"; procbg.style.width = "100%"; procbg.style.height = "100%"; procbg.style.position = "absolute"; procbg.style.top = "0"; procbg.style.left = "0"; procbg.style.zIndex = "500"; procbg.style.opacity = "0.3"; procbg.style.filter = "Alpha(opacity=30)"; //背景层加入页面 document.body.appendChild(procbg); document.body.style.overflow = "hidden"; } //拖动 function drag(obj){ var s = obj.style; var b = document.body; var x = event.clientX + b.scrollLeft - s.pixelLeft; var y = event.clientY + b.scrollTop - s.pixelTop; var m = function(){ if(event.button == 1){ s.pixelLeft = event.clientX + b.scrollLeft - x; s.pixelTop = event.clientY + b.scrollTop - y; }else { document.detachEvent("onmousemove", m); } } document.attachEvent("onmousemove", m) if(!this.z) this.z = 999; s.zIndex = ++this.z; event.cancelBubble = true; } function closeProc(){ message_box.style.visibility='hidden'; procbg.style.visibility = "hidden"; } </script> </head> <body> <input type="button" value="弹出可拖动DIV" onclick="showProc();" /> <div id="message_box" style="position:absolute; left:10%;top:10%;width:80%;height:80%; filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:1000; visibility:hidden"> <div id= "message" style="border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%;"> <!-- DIV弹出状态行:标题、关闭按钮 --> <div style="background:#666; height:5%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff" onmousedown="drag(message_box);return false"> <span style="display:inline;width:150px;position:absolute;font-size:200%">标题项</span> <span onClick="closeProc();" style="float:right;display:inline;cursor:hand;font-size:200%">×</span> </div> 具体内容,可以是表格也可以是DIV </div><!-- message --> </div><!-- message_box --> </body> </html> |
相关文章推荐
- js 获取浏览器高度和宽度值(多浏览器)
- 在JS代码中获取Struts2中的返回值或者参数
- JS获取对象的绝对坐标
- JS弹出可以移动的DIV
- jsp中路径使用
- JS获取URL中的参数
- JavaScript的IE和火狐的兼容性解决办法
- 用Jsp来实现文件下载功能的几种方式
- 夺命雷公狗---javascript NO:09 事件绑定的种类1
- 夺命雷公狗---javascript NO:08 常用的事件
- 夺命雷公狗---javascript NO:07 事件编程介绍
- 夺命雷公狗---javascript NO:06 数组定义和遍历
- js获取鼠标位置实例详解
- 夺命雷公狗---javascript NO:05 js函数中的作用域
- JavaScript常用基础知识强化学习
- 夺命雷公狗---javascript NO:04 js中的函数
- 夺命雷公狗---javascript NO:03 流程结构
- 夺命雷公狗---javascript NO:02 数据类型和运算符
- 夺命雷公狗---javascript NO:01 快速入门
- 高性能JavaScript模板引擎artTemplate介绍