JS+CSS实现Div弹出窗口同时背景变暗的方法
更新时间：2015年03月04日 15:14:56 作者：代码家园
这篇文章主要介绍了JS+CSS实现Div弹出窗口同时背景变暗的方法,是一款比较典型的javascript操作弹出窗口的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<html>
<head>
<title>JS+CSS实现的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);">[关闭]</a> </div></td>
</tr>
<tr>
<td height="130" align="center">
<br><br><hr><p align="center"><font color=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：脚本之家</font></p>
</td>
</tr>
</table>
</div>
<!-- 浮层框架结束-->
</body>
</html>
<head>
<title>JS+CSS实现的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);">[关闭]</a> </div></td>
</tr>
<tr>
<td height="130" align="center">
<br><br><hr><p align="center"><font color=red>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。来源：脚本之家</font></p>
</td>
</tr>
</table>
</div>
<!-- 浮层框架结束-->
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了JS前端首屏优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了页面装载js及性能分析方法,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了JS随机排序数组实现方法,结合具体实例形式对比分析了javascript针对数组进行随机排序的相关操作技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了JavaScript事件类型中焦点、鼠标和滚轮事件，以及注意事项，感兴趣的小伙伴们可以参考一下2016-01-01
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行...2006-10-10
这篇文章主要给大家介绍了关于axios返回空对象的问题解决方法，文中介绍的非常详细，相信对大家学习或者使用axios具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要介绍了通过实例解析js可枚举属性与不可枚举属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-12-12
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
如何在js中让函数睡眠多少秒? 经常会有Javascript初学者提出这样的问题,自从js出现以来.2010-08-08
这篇文章主要为大家介绍了javascript计算时间差的示例代码，，一般来说都是计算当前时间和一个指定时间点之间的差距，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论