cari

Rumah  >  Artikel  >  hujung hadapan web  >  Cara membuat kotak dialog lapisan topeng berdasarkan kemahiran JavaScript_javascript

Cara membuat kotak dialog lapisan topeng berdasarkan kemahiran JavaScript_javascript

WBOY
WBOYasal
2016-05-16 15:17:491556semak imbas

1. Lapisan topeng sebenarnya adalah DIV lut sinar yang meliputi keseluruhan antara muka, dan zIndex diproses untuk menjadikannya terapung di atas elemen lain. Pengguna tidak boleh mengklik pada elemen di bawah, atau tiada respons apabila mengklik.

2. Paparkan lapisan di atas lapisan topeng Memandangkan lapisan topeng menyekat semua elemen lain, pengguna hanya boleh mengklik pada lapisan pop timbul untuk mencipta ilusi tetingkap modal.

Tiada lagi perkara karut, saya hanya akan menghantar kod js untuk anda. 

<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>UntitledDocument</title> 
<script> 
function openDiv(newDivID) 
{ 
var newMaskID = "mask"; //遮罩层id 
var newMaskWidth =document.body.scrollWidth;//遮罩层宽度 
var newMaskHeight =document.body.scrollHeight;//遮罩层高度 
//mask遮罩层 
var newMask = document.createElement("div");//创建遮罩层 
newMask.id = newMaskID;//设置遮罩层id 
newMask.style.position = "absolute";//遮罩层位置 
newMask.style.zIndex = "1";//遮罩层zIndex 
newMask.style.width = newMaskWidth + "px";//设置遮罩层宽度 
newMask.style.height = newMaskHeight + "px";//设置遮罩层高度 
newMask.style.top = "0px";//设置遮罩层于上边距离 
newMask.style.left = "0px";//设置遮罩层左边距离 
newMask.style.background = "gray";//#33393C//遮罩层背景色 
newMask.style.filter = "alpha(opacity=40)";//遮罩层透明度IE 
newMask.style.opacity = "0.40";//遮罩层透明度FF 
document.body.appendChild(newMask);//遮罩层添加到DOM中 
window.open('http://www.baidu.com','_blank','width=500,height=260,menubar=no,toolbar=no');　　//弹出子页面，具体自用自改
//弹出层滚动居中 
function newDivCenter() 
{ 
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 
- newDivHeight/2) + "px"; 
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 
- newDivWidth/2) + "px"; 
} 
if(document.all)//处理滚动事件，使弹出层始终居中 
{ 
window.attachEvent("onscroll",newDivCenter); 
} 
else 
{ 
window.addEventListener('scroll',newDivCenter,false); 
} 
//关闭新图层和mask遮罩层 
var newA = document.createElement("span"); 
newA.href = "#"; 
newA.style.position = "absolute";//span位置 
newA.style.left=350+ "px"; 
newA.innerHTML = "Close"; 
newA.onclick = function()//处理关闭事件 
{ 
if(document.all) 
{ 
window.detachEvent("onscroll",newDivCenter); 
} 
else 
{ 
window.removeEventListener('scroll',newDivCenter,false); 
} 
document.body.removeChild(newMask);//移除遮罩层 
document.body.removeChild(newDiv);////移除弹出框 
return false; 
} 
newDiv.appendChild(newA);//添加关闭span 
} 
</script> 
</head> 
<BODY> 
<a onclick="openDiv('newDiv');" style="cursor:pointer">点我点我</a> 
<br>
username:<input type="text" name="uname"/><br>
u p w d:<input type="password" name="upwd"/>
<br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /><br /> 
<a onclick="openDiv('newDiv');" style="cursor:pointer">点我点我</a> 
</BODY> 
</html>

Di atas ialah pengetahuan berkaitan yang diperkenalkan oleh editor kepada anda tentang cara membuat kotak dialog lapisan topeng berdasarkan JavaScript. Saya harap ia akan membantu semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript css3 dalam APP melaksanakan kesan muat semula tarik-turunArtikel seterusnya：JavaScript css3 dalam APP melaksanakan kesan muat semula tarik-turun

Artikel berkaitan

Lihat lagi