這篇文章主要介紹了js控制div彈出層實現方法,可實現點擊鏈接彈出div浮動層,且背景色變暗的效果,是一款非常實用的特效源碼,需要的朋友可以參考下
本文實例講述了js控制div彈出層實現方法。分享給大家供大家參考。具體分析如下：
這是個功能很好，且容易調用和控制的彈出層。感興趣的朋友可以調試運行一下看看效果如何~O(∩_∩)O~
- <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程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
