JS+CSS實(shí)現(xiàn)Div彈出窗口同時(shí)背景變暗的方法
更新時(shí)間：2015年03月04日 15:14:56 作者：代碼家園
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)Div彈出窗口同時(shí)背景變暗的方法,是一款比較典型的javascript操作彈出窗口的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS+CSS實(shí)現(xiàn)Div彈出窗口同時(shí)背景變暗的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JS+CSS實(shí)現(xiàn)的Div彈出窗口，同時(shí)背景變暗</title>
<script>
function locking(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
function Lock_CheckForm(theForm){
document.all.ly.style.display='none';document.all.Layer2.style.display='none';
return false;
}
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 12px}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p align="center">
<input type="button" value="彈出DIV" onClick="locking()" />
</p>
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 2; left: 0px; display: none;">
</div>
<!-- 浮層框架開始 -->
<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10);
background-color: #fff; display: none;" >
<table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0 solid #e7e3e7;
border-collapse: collapse ;" >
<tr>
<td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
font-weight: bold; font-size: 12px;" height="10" valign="middle">
<div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[關(guān)閉]</a> </div></td>
</tr>
<tr>
<td height="130" align="center">
<br><br><hr><p align="center"><font color=red>本特效收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。來源：腳本之家</font></p>
</td>
</tr>
</table>
</div>
<!-- 浮層框架結(jié)束-->
</body>
</html>
<head>
<title>JS+CSS實(shí)現(xiàn)的Div彈出窗口，同時(shí)背景變暗</title>
<script>
function locking(){
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
function Lock_CheckForm(theForm){
document.all.ly.style.display='none';document.all.Layer2.style.display='none';
return false;
}
</script>
<style type="text/css">
<!--
.STYLE1 {font-size: 12px}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p align="center">
<input type="button" value="彈出DIV" onClick="locking()" />
</p>
<div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
z-index: 2; left: 0px; display: none;">
</div>
<!-- 浮層框架開始 -->
<div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10);
background-color: #fff; display: none;" >
<table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0 solid #e7e3e7;
border-collapse: collapse ;" >
<tr>
<td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
font-weight: bold; font-size: 12px;" height="10" valign="middle">
<div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[關(guān)閉]</a> </div></td>
</tr>
<tr>
<td height="130" align="center">
<br><br><hr><p align="center"><font color=red>本特效收集于互聯(lián)網(wǎng)，只為興趣與學(xué)習(xí)交流，不作商業(yè)用途。來源：腳本之家</font></p>
</td>
</tr>
</table>
</div>
<!-- 浮層框架結(jié)束-->
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS+CSS3制作炫酷的彈窗效果
- js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
- JS觸摸屏網(wǎng)頁版仿app彈窗型滾動(dòng)列表選擇器/日期選擇器
- 關(guān)于vue.js彈窗組件的知識(shí)點(diǎn)總結(jié)
- js彈出框、對(duì)話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- js彈出div并顯示遮罩層
- 如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果
- js點(diǎn)擊彈出div層實(shí)現(xiàn)可拖曳的彈窗效果
- javascript 通過封裝div方式彈出div窗體
- html 鎖定頁面(js遮罩層彈出div效果)
- JS彈窗 JS彈出DIV并使整個(gè)頁面背景變暗功能的實(shí)現(xiàn)代碼
相關(guān)文章
div當(dāng)滾動(dòng)到頁面頂部的時(shí)候固定在頂部實(shí)例代碼
使用Javascript實(shí)現(xiàn)了滾動(dòng)頁面時(shí)，DIV到達(dá)頂部時(shí)固定在頂部。在IE下效果有點(diǎn)閃，具體代碼如下，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要為大家介紹了GoJs連線繪圖模板Link使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁布局中應(yīng)用響應(yīng)式設(shè)計(jì)，感興趣的小伙伴們可以參考一下2016-05-05
利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件詳解
“工欲善其事，必先利其器” 恩，這句話我覺得說的特別有道理，下面這篇文章主要給大家介紹了關(guān)于利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
javascript中方便增刪改cookie的一個(gè)類
把jquery.cookie.js改了一下，改成了純javascript版本，以備我以后項(xiàng)目只需，增加了一個(gè)得到頁面全部cookie鍵值的功能2012-10-10
有時(shí)候在寫JavaScript添加到你的網(wǎng)頁中的時(shí)候，你將需要決定是使用已有的可用的JavaScript庫還是自己寫所有代碼。其中每個(gè)各有優(yōu)缺點(diǎn)，因此沒有任何一種方式對(duì)每個(gè)人來說都是絕對(duì)正確的選擇。2010-01-01
這篇文章主要給大家通過代碼實(shí)例分析了promise化微信小程序api的使用方法，對(duì)此有需要的朋友可以參考學(xué)習(xí)下。2018-04-04
JavaScript常見的函數(shù)中的屬性與方法總結(jié)
當(dāng)定義和調(diào)用函數(shù)時(shí)，JavaScript?函數(shù)對(duì)象會(huì)自動(dòng)具有一些特定的屬性，本文為大家總結(jié)了一些常見的屬性和方法，感興趣的小伙伴可以了解一下2023-05-05
使用JavaScript構(gòu)建JSON格式字符串實(shí)現(xiàn)步驟
這篇文章將幫助你使用javascript來創(chuàng)建json格式字符串如果你需要通過web項(xiàng)目來構(gòu)建json格式字符串的響應(yīng),感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03