JS+CSS實現(xiàn)Div彈出窗口同時背景變暗的方法
更新時間:2015年03月04日 15:14:56 作者:代碼家園
這篇文章主要介紹了JS+CSS實現(xiàn)Div彈出窗口同時背景變暗的方法,是一款比較典型的javascript操作彈出窗口的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS+CSS實現(xiàn)Div彈出窗口同時背景變暗的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
復(fù)制代碼 代碼如下:
<html>
<head>
<title>JS+CSS實現(xiàn)的Div彈出窗口,同時背景變暗</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實現(xiàn)的Div彈出窗口,同時背景變暗</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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- JS+CSS3制作炫酷的彈窗效果
- js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
- JS觸摸屏網(wǎng)頁版仿app彈窗型滾動列表選擇器/日期選擇器
- 關(guān)于vue.js彈窗組件的知識點總結(jié)
- js彈出框、對話框、提示框、彈窗實現(xiàn)方法總結(jié)(推薦)
- js彈出div并顯示遮罩層
- 如何創(chuàng)建一個JavaScript彈出DIV窗口層的效果
- js點擊彈出div層實現(xiàn)可拖曳的彈窗效果
- javascript 通過封裝div方式彈出div窗體
- html 鎖定頁面(js遮罩層彈出div效果)
- JS彈窗 JS彈出DIV并使整個頁面背景變暗功能的實現(xiàn)代碼
相關(guān)文章
微信小程序?qū)崿F(xiàn)倒計時調(diào)用相機自動拍照功能
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)倒計時調(diào)用相機自動拍照功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-06-06利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解
“工欲善其事,必先利其器” 恩,這句話我覺得說的特別有道理,下面這篇文章主要給大家介紹了關(guān)于利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2018-09-09JavaScript常見的函數(shù)中的屬性與方法總結(jié)
當(dāng)定義和調(diào)用函數(shù)時,JavaScript?函數(shù)對象會自動具有一些特定的屬性,本文為大家總結(jié)了一些常見的屬性和方法,感興趣的小伙伴可以了解一下2023-05-05使用JavaScript構(gòu)建JSON格式字符串實現(xiàn)步驟
這篇文章將幫助你使用javascript來創(chuàng)建json格式字符串如果你需要通過web項目來構(gòu)建json格式字符串的響應(yīng),感興趣的各位可以參考下哈,希望可以幫助到你2013-03-03