首頁 > web前端 > js教程 > js彈出div並顯示遮罩層_javascript技巧

js彈出div並顯示遮罩層_javascript技巧

WBOY
發布: 2016-05-16 17:00:30
原創
1076 人瀏覽過
複製程式碼 程式碼如下:

//------------- -------彈出層-------------------
//popDivId:彈出層div的ID
//dragDivId:用於拖動div的ID
//isShowMask:是否顯示遮罩層
function popDivShow(popDivId, dragDivId, isShowMask) {
if (isShowMask) {
creatMask(Div); 🎜>var oWins = document.getElementById(popDivId);
var oWins_title = document.getElementById(dragDivId);
var bDrag = false;
var disX = disc = 000o>o. display = "block";
oWins_title.onmousedown = function(event) {
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWins.setLeft ;
disY = event.clientY - oWins.offsetTop;
this.setCapture && this.setCapture();
return false;
};
document.onmousemove = function(event) {
if (!bDrag)
return;
var event = event || window.event;
var iL = event.clientX - disX;
var iT = event.clientY - disY;
var maxL = document.documentElement.clientWidth - oWins.offsetWidth;
var maxT = document.documentElement.clientHeight - oWins.offsetHeight;
iL = iL maxL ? maxL : iL;
iT = iT iT = iT > maxT ? maxT : iT;
oWins.style.marginTop = oWins.style.marginLeft = 0.marginTop = oWins.style.marginLeft = 0. ;
oWins.style.left = iL "px";
oWins.style.top = iT "px";
return false;
};
document.onmouseup = window.onblur = oWins_title.onlosecapture = function() {
bDrag = false;
oWins_title.releaseCapture && oWins_title.releaseCapture();
彈出};
} > popDivHidden(popDivId) {
var oWins = document.getElementById(popDivId);
oWins.style.display = "none";
window.parent.document.body.removeChild(window.parent.document.body.removeChild(window.parent.document.body.removeChild(window.parent.document.body.removeChild(window.). getElementById("maskDiv"));
}
// 取得彈出層的zIndex
function getZindex(popDivId) {
var popDiv = document.getElementById(DivId)
var popDiv = document.getElementById(Div); popDiv.style.zIndex;
return popDivZindex;

}
// 建立遮罩層
function creatMask(popDivId) {
// 參數為彈出頁的寬度,w,w參數h為彈出頁面的高度,參數s為彈出頁面的路徑
var maskDiv = window.parent.document.createElement("div");
maskDiv.id = "maskDiv";
maskDiv. style.position = "fixed";
maskDiv.style.top = "0";
maskDiv.style.left = "0";
maskDiv.style.zIndex = getZindex(popDivId) - 1;
maskDiv.style.backgroundColor = "#333";
maskDiv.style.filter = "alpha(opacity=70)";
maskDiv.style.opacity = "0.7";
maskDiv. style.width = "100%";
maskDiv.style.height = (window.parent.document.body.scrollHeight 50) "px";
window.parent.document.body.appendChild(maskDiv);
maskDiv.onmousedown = function() {
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
}
}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板