Heim > Web-Frontend > js-Tutorial > js Control Div Popup-Layer-Implementierungsmethode

js Control Div Popup-Layer-Implementierungsmethode

PHPz
Freigeben: 2018-10-15 14:38:57
Original
1399 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode von js, die die Div-Popup-Ebene steuert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist eine Popup-Ebene mit guten Funktionen, die einfach aufzurufen und zu steuern ist. Interessierte Freunde können es debuggen und ausführen, um zu sehen, wie es funktioniert~O(∩_∩)O~

弹出窗口(可拖动,背景灰色透明)*{padding:0; margin:0}.close{float:right;cursor:default}")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "分类:确定 取消";
//弹出窗口设置
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 = "关闭"+""+ title +"";
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");  
//-->
" _ue_custom_node_="true">
Nach dem Login kopieren

[Verwandte Tutorial-Empfehlungen]

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
3. Bootstrap-Tutorial

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage