js彈出div并顯示遮罩層
更新時(shí)間:2014年02月12日 09:49:38 作者:
彈出div顯示遮罩層的效果,想必大家都有見(jiàn)到過(guò)吧,下面有個(gè)示例,大家可以參考下
復(fù)制代碼 代碼如下:
//--------------------彈出層-------------------
//popDivId:彈出層div的ID
//dragDivId:用于拖動(dòng)div的ID
//isShowMask:是否顯示遮罩層
function popDivShow(popDivId, dragDivId, isShowMask) {
if (isShowMask) {
creatMask(popDivId);
}
var oWins = document.getElementById(popDivId);
var oWins_title = document.getElementById(dragDivId);
var bDrag = false;
var disX = disY = 0;
oWins.style.display = "block";
oWins_title.onmousedown = function(event) {
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWins.offsetLeft;
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 < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
iT = iT < 0 ? 0 : iT;
iT = iT > maxT ? maxT : iT;
oWins.style.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();
};
}
// 隱藏彈出層
function popDivHidden(popDivId) {
var oWins = document.getElementById(popDivId);
oWins.style.display = "none";
window.parent.document.body.removeChild(window.parent.document.getElementById("maskDiv"));
}
// 獲取彈出層的zIndex
function getZindex(popDivId) {
var popDiv = document.getElementById(popDivId);
var popDivZindex = popDiv.style.zIndex;
return popDivZindex;
}
// 創(chuàng)建遮罩層
function creatMask(popDivId) {
// 參數(shù)w為彈出頁(yè)面的寬度,參數(shù)h為彈出頁(yè)面的高度,參數(shù)s為彈出頁(yè)面的路徑
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"));
};
}
您可能感興趣的文章:
- js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
- js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
- js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法
- js實(shí)現(xiàn)遮罩層彈出框的方法
- js css 實(shí)現(xiàn)遮罩層覆蓋其他頁(yè)面元素附圖
- 純js實(shí)現(xiàn)遮罩層效果原理分析
- JS實(shí)現(xiàn)遮罩層效果的簡(jiǎn)單實(shí)例
- 原生js實(shí)現(xiàn)半透明遮罩層效果具體代碼
- JS遮罩層效果 兼容ie firefox jQuery遮罩層
- javascript實(shí)現(xiàn)遮罩層動(dòng)態(tài)效果實(shí)例
相關(guān)文章
Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能
這篇文章主要介紹了Bootstrap 表單驗(yàn)證formValidation 實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證功能,需要的朋友可以參考下2017-05-05
js 獲取網(wǎng)絡(luò)圖片的高度和寬度的實(shí)現(xiàn)方法(變通了下)
簡(jiǎn)單地說(shuō)就是把圖片放入一個(gè)自動(dòng)伸縮的DIV中,然后獲取DIV的寬和高!這個(gè)不錯(cuò)的變通,大家可以參考下。2009-10-10
uniapp抖音小程序一鍵獲取用戶手機(jī)號(hào)的示例代碼
文章介紹了如何在uniapp抖音小程序中通過(guò)點(diǎn)擊按鈕一鍵獲取用戶手機(jī)號(hào),encryptedData和iv通過(guò)點(diǎn)擊按鈕回傳,后端部分通過(guò)解密獲取手機(jī)號(hào),感興趣的朋友一起看看吧2024-12-12
JS判斷頁(yè)面是否出現(xiàn)滾動(dòng)條的方法
這篇文章主要介紹了JS判斷頁(yè)面是否出現(xiàn)滾動(dòng)條的方法,涉及javascript針對(duì)頁(yè)面元素的讀取與判定實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問(wèn)我一個(gè)問(wèn)題:“有一個(gè)JSON對(duì)象,其中有若干個(gè)子對(duì)象,如何遍歷這個(gè)對(duì)象中的子對(duì)象?”2009-07-07
JS實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單的九宮格抽獎(jiǎng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
如何手動(dòng)實(shí)現(xiàn)es5中的bind方法詳解
這篇文章主要給大家介紹了關(guān)于如何手動(dòng)實(shí)現(xiàn)es5中的bind方法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12

