導航:首頁 > 編程語言 > js彈出遮罩層

js彈出遮罩層

 發布時間：2023-03-31 21:13:23

Ⅰ 怎麼用js做出，點擊一個按鈕,彈出一個遮罩層,5秒後自己關閉.的效果

<!DOCTYPEhtml>
<htmllang="en">
<head>
	<metacharset="UTF-8">
	<title>Document</title>
	<style>
		#cover{
			position:fixed;
			top:0;
			left:0;
			height:100%;
			width:100%;
			background-color:rgba(0,0,0,0.3);
			display:none;
			z-index:1000;
		}
	</style>
</head>
<body>

	<button>這是一個按鈕</button>
	<divid="cover">這是一個遮罩</div>
	<script>
		varbtn=document.getElementsByTagName('button')[0];
		btn.addEventListener('click',function(){
			varcover=document.getElementById('cover');
			cover.style.display='block';
			setTimeout(function(){
				cover.style.display='none';
			},5000)
		})

	</script>
</body>
</html>

Ⅱ js彈出的遮罩層，如何能遮住全屏

遮罩層的CSS

#mask{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,.3);
z-index:99999;
}

在傳統抄瀏覽器中，不支持rgba的寫法。
可以用偽造一層遮罩層
//html
<divid="modal">
<divclass="mask"></div>
<!--這里開始才是真正的內容-->
<divclass="dialog"></div>
</div>

//CSS
#modal{
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
z-index:99999;
}
#modal.mask{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:#000;
opacity:.3;
}

Ⅲ html5如何實現彈出提示框，並且伴隨遮罩層並且可以關閉彈出框

通過來jquery的show()和hide()函數自聯合使用，實現彈出窗口。

一、show（）和hide（）函數解析：

1、show() 方法顯示隱藏的被選元素。

注意：show() 適用於通過 jQuery 方法和 CSS 中 display:none 隱藏的元素（不適用於通過 visibility:hidden 隱藏的元素）。

2、hide() 方法隱藏被選元素。

這與 CSS 屬性 display:none 類似，但是隱藏的元素不會被完全顯示（不再影響頁面的布局）。

二、設計一個HTML頁面，包括一個簡單的彈出窗，和一個顯示按鈕。其中，調用了jquery的以上兩個函數。具體代碼如下：

Ⅳ 用zepto.js寫一個遮罩彈出層

<style>
#H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}
#H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;}
#H-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;}
#H-dialog #msgCont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../Images/ui_alert.png) no-repeat 20px 50%;}
</style>
<div id="H-dialog">
<a class="close" onclick="popupClose(this)">×</a>
<div class="title">提示</div>
<div id="msgCont">內容</div>
</div>

<script type="text/javascript">
//鎖定背景屏幕
function lockScreen() {
var clientH = document.body.offsetHeight; //body高度
var clientW = document.body.offsetWidth; //body寬度
var docH = document.body.scrollHeight; //瀏覽器高度
var docW = document.body.scrollWidth; //瀏覽器寬度
var bgW = clientW > docW ? clientW : docW; //取有效寬
var bgH = clientH > docH ? clientH : docH; //取有效高
var blackBg = document.createElement("div");
blackBg.id = "blackBg";
blackBg.style.position = "absolute";
blackBg.style.zIndex = "99999";
blackBg.style.top = "0";
blackBg.style.left = "0";
blackBg.style.width = bgW+"px";
blackBg.style.height = bgH+"px";
blackBg.style.opacity = "0.4";
blackBg.style.backgroundColor = "#333";
document.body.appendChild(blackBg);
}
//關閉按鈕事件
function popupClose(el) {
var blackBg = document.getElementById("blackBg");
blackBg && document.body.removeChild(blackBg);
el.parentNode.style.display = "none";
}
//自動關閉
function autoClose(id) {
id = id || "H-dialog";
var blackBg = document.getElementById("blackBg");
var objDiv = document.getElementById(id);
setTimeout(function(){
blackBg && document.body.removeChild(blackBg);
objDiv.style.display = "none";
},2000);
}
/**
*功能 : 彈窗信息
*參數1 : 提示信息內容
*參數2 : 提示信息狀態默認0 為提示信息,1為成功信息
*參數3 : 彈窗div的id,默認"H-dialog"
*參數4 : 彈窗內容的id,默認"msgCont"
**/
function showMsg(msg) {
msg = msg || "請重新操作";
var status = arguments[1] || 0,
popupId = arguments[2] || "H-dialog",
contentId = arguments[3] || "msgCont";
lockScreen();
//屏幕實際高寬
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
//滾動條高寬
var scrollLeft = window.document.documentElement.scrollLeft;
var scrollTop = 0;
if (typeof window.pageYOffset != 'undefined') {
scrollTop = window.pageYOffset;
} else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollTop = window.document.documentElement.scrollTop;
} else if (typeof window.document.body != 'undefined') {
scrollTop = window.document.body.scrollTop;
}
var div_X = (pageWidth - 400) / 2 + scrollLeft;
var div_Y = (pageHeight - 200) / 2 + scrollTop;
var objDiv = document.getElementById(popupId);
if (status) {
document.getElementById(contentId).style.background = "url($Root/Assets/Images/ui_success.png) no-repeat 20px 50%";
}
document.getElementById(contentId).innerHTML = msg;
objDiv.style.display = "block";
objDiv.style.left = div_X + "px";
objDiv.style.top = div_Y + "px";
autoClose(popupId);
}
</script>

Ⅳ 高分-JavaScript代碼修改，去掉遮罩層效果。

幫你去了，修改Dialog.js代碼粘過來了：
385 行：
bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);width:100%;height:" + sh + "px;z-index:991";
改為：
bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);width:0px;height:0px;font-size:0px;z-index:991";

405 行:
bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);width:100%;height:" + sh + "px;z-index:960";
改為：
bgdiv.style.cssText = "background-color:#333;position:absolute;left:0px;top:0px;opacity:0.4;filter:alpha(opacity=40);width:0px;height:0px;font-size:0px;z-index:960";

OK

Ⅵ js 彈出框 裡面元素touchmove時候阻止其他元素滾動，背景遮罩層還無法阻止冒泡，怎麼禁用遮罩層touchmove

1、在遮罩層停止添加touchmove

Ⅶ js彈出div並顯示遮罩層

彈出div顯示遮罩層的效果，想必大家都有見到過吧，下面有個示例，大家可以參考下
代碼如下:
//--------------------彈出層-------------------
//popDivId:彈出層div的ID
//dragDivId:用於拖動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;

}
//
創建遮罩層
function
creatMask(popDivId)
{
//
參數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"));
};
}

Ⅷ js代碼定時關閉遮罩層，小白求教Javascript代碼

這是一個打開網頁 30秒後自動彈出紅色的遮罩層，5秒後遮罩層自動關閉。

<html>
<bodyonload="load()">
<divid="zzDiv"style="width:100%;height:100%;opacity:0.5;background-color:#ccc;display:none;position:fixed;z-index:9999;">遮罩層</div>
ndndndndnddnnd
<scripttype="text/javascript">
functionload(){
setTimeout(showDiv,3000);
}
functionshowDiv(){
document.getElementById("zzDiv").style.display="block";
setTimeout(hideDiv,5000);
}
functionhideDiv(){
document.getElementById("zzDiv").style.display="none";
}
</script>
</body>
</html>

關於移植：在你想要彈出遮罩層的頁面修改。按照頁面結構把對應標簽的內容復制到你要修改的頁面中。例如<body></body>的內容復制到<body></body>裡面。再將 <body> 改成<bodyonload="load()">。

閱讀全文

與js彈出遮罩層相關的資料

熱點內容
活力影院兒女傳奇畫師 瀏覽：692
懷孕18年的電影叫什麼名字 瀏覽：819
gl文下載 瀏覽：837
克隆qq安裝系統嗎 瀏覽：352
2016劍靈門派怎麼升級 瀏覽：868
大數據助力傳統家居產業升級 瀏覽：28
java轉換日期格式 瀏覽：46
private公司作品論壇 瀏覽：884
前度2電影 瀏覽：89
看韓國倫理電影最好的app下載 瀏覽：976
天正導出t3後桌面無文件 瀏覽：474
紅羊電影公司的導演 瀏覽：932
臨海如何製作自己的卡盟網站 瀏覽：399
電影由幾個故事組成包括新郎出軌伴郎 瀏覽：393
叮咚金夕電影 瀏覽：400
阿布是什麼電影里的人物 瀏覽：419
少兒編程怎麼做幾加幾等於幾 瀏覽：987
bt1868，com 瀏覽：732
大眾點評網iphone裝不了 瀏覽：931
logo做微信頭像好嗎 瀏覽：938

友情鏈接