1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

js控制div弹出层实现方法

作者:用户 来源:互联网 时间:2016-05-12 09:38:29

javascript实例div程序设计方法控制jsp ajax div 弹出层弹出div层js实现div拖动效果js实现div拖动js实现弹出divdiv弹出层控制DIV层js弹出层

js控制div弹出层实现方法 - 摘要: 本文讲的是js控制div弹出层实现方法,    本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下:   这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~

   本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下:

  这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出窗口(可拖动,背景灰色透明)</title> <script type="text/javascript"> <!-- /*FileName:AlertMsg.js title:提示标题 content:提示的内容*/ document.write("<style type="text/css">*{padding:0; margin:0}.close{float:right;cursor:default}</style>") function $(id){ return document.getElementById(id)} function AlertMsg(title,content){ var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con; con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类:</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><input type='text' name='typename' size='20'/></td></tr><tr><th></th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><button style='line-height:normal;' type='submit' onclick='return submitform()'>确定</button> <button style='line-height:normal;' type='reset'>取消</button></td></tr></table></form>"; //弹出窗口设置 msgw = 300; //窗口宽度 msgh = 150; //窗口高度 msgbg = "#FFF"; //内容背景 msgcolor = "#000"; //内容颜色 bordercolor = "#000"; //边框颜色 titlecolor = "#FFF"; //标题颜色 titlebg = "#369"; //标题背景 //遮罩背景设置 var sWidth,sHeight; sWidth = screen.availWidth; sHeight = document.body.scrollHeight; //创建遮罩背景 var maskObj = document.createElement("div"); maskObj.setAttribute('id','maskdiv'); maskObj.style.position = "absolute"; maskObj.style.top = "0"; maskObj.style.left = "0"; maskObj.style.background = "#777"; maskObj.style.filter = "Alpha(opacity=30);"; maskObj.style.opacity = "0.3"; maskObj.style.width = sWidth + "px"; maskObj.style.height = sHeight + "px"; maskObj.style.zIndex = "10000"; document.body.appendChild(maskObj); //创建弹出窗口 var msgObj = document.createElement("div") msgObj.setAttribute("id","msgdiv"); msgObj.style.position ="absolute"; msgObj.style.top = (screen.availHeight - msgh) / 4 + "px"; msgObj.style.left = (screen.availWidth - msgw) / 2 + "px"; msgObj.style.width = msgw + "px"; msgObj.style.height = msgh + "px"; msgObj.style.fontSize = "12px"; msgObj.style.background = msgbg; msgObj.style.border = "1px solid " + bordercolor; msgObj.style.zIndex = "10001"; //创建标题 var thObj = document.createElement("div"); thObj.setAttribute("id","msgth"); thObj.className = "DragAble"; thObj.style.cursor = "move"; thObj.style.padding = "4px 6px"; thObj.style.color = titlecolor; thObj.style.background = titlebg; var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>"; thObj.innerHTML = titleStr; //创建内容 var bodyObj = document.createElement("div"); bodyObj.setAttribute("id","msgbody"); bodyObj.style.padding = "10px"; bodyObj.style.lineHeight = "1.5em"; bodyObj.innerHTML = con; var txt = document.createTextNode(content) bodyObj.appendChild(txt); //生成窗口 document.body.appendChild(msgObj); $("msgdiv").appendChild(thObj); $("msgdiv").appendChild(bodyObj); } function CloseMsg(){ //移除对象 document.body.removeChild($("maskdiv")); $("msgdiv").removeChild($("msgth")); $("msgdiv").removeChild($("msgbody")); document.body.removeChild($("msgdiv")); } //拖动窗口 var ie = document.all; var nn6 = document.getElementById&&!document.all; var isdrag = false; var y,x; var oDragObj; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; return false; } } function initDrag(e) { var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className=="DragAble") { isdrag = true; oDragObj = oDragHandle.parentNode; nTY = parseInt(oDragObj.style.top); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(oDragObj.style.left); x = nn6 ? e.clientX : event.clientX; document.onmousemove = moveMouse; return false; } } document.onmousedown = initDrag; document.onmouseup = new Function("isdrag=false"); //--> </script> </head> <body> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr > <td height="100" align="center" > <p><a href="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p> </td> </tr> </table> </div> </body> </html>

  希望本文所述对大家的javascript程序设计有所帮助。

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript , 实例 , div , 程序设计 , 方法 , 控制 , jsp ajax div 弹出层 , 弹出div层 , js实现div拖动效果 , js实现div拖动 , js实现弹出div , div弹出层 , 控制DIV层 js弹出层 js弹出div窗口、jquery弹出div遮罩层、点击按钮弹出div、div实现iframe效果、js实现div的轮播切换,以便于您获取更多的相关知识。

js-这个下拉框是如何实现的?

...;&lt;div class=""trigger""&gt; &lt;a href=""#""&gt;鼠标移动到这里弹出层&lt;/a&gt; &lt;div class=""popup""&gt; 弹出层的内容&lt;br /&gt; 弹出层的内容&lt;br /&gt; 弹出层的内容 &lt;/div&gt;&lt;/div&gt; 解决方案二: 如果想自己写:想完成下...

js控制div弹出层实现方法_javascript技巧

本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下: 这是个功能很好,且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~ 弹出窗口(可拖动,背景灰色透明) ...

html+js removeChild和addChild控制遮罩層

最近想做一個html5+sqlite的應用,需要做一個遮罩層作為模態輸入、修改數據UI,現已成功實現 在其他網站找到的遮罩層js代碼,主要是使用addChild和removeChild來處理,隨便編輯都可以,忘記是從哪裡copy下來了,對不起了原作     ...

使用ThinkPHP框架快速开发网站(多图)

...的) 2.    Lib   (最重要。存放MVC模式中的模型类和控制器类) 3.    Tpl(存放模板文件,按道理前面我们下载的模板应该放在这里) 4.    Runtime(存放运行时文件,比如缓存啊,数据库表缓存什么的) 最后贴出浏览器...

关于Div弹出层无法取值的解决方法

...无法获取到的,另外在script标签里写的代码也是无法选中控制这个弹出层里的控件的。 面对这个问题,我尝试了以下几种方法都获取不了这个可恶的值,无奈上网找了一些方法同样没能解决。 1、在script标签里用jQuery的属性选择...

前三篇
后三篇