DIV模仿窗口效果
来源：互联网 发布：保险行业最新数据 编辑：程序博客网 时间：2024/04/29 15:28
一,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>点击文字弹出一个DIV层窗口代码</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#000000;
z-index:1001;
-moz-opacity: 0.2;
opacity:0.2;
filter: alpha(opacity=20);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">这是一个层窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
二、
<head>
<meta name="Robots" content="index,follow">
</meta><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</meta><meta name="keywords" content="">
</meta><meta name="description" content="">
<style>
#content{position:absolute;width:1000px;height:620px;left:0px; top:0px; background:#cccccc;filter:alpha(opacity=90);opacity:0.9; background:#cccccc;}
.textcont{position:absolute;width:500px;left:0px; top:0px; background-color:#000000; color:#ffffff; border:1px #000000 solid; background-image:url(bg.gif);z-index:1002; }
</style>
<title></title>
</meta></head>
<body>
<div style="width:100%; height:100%;">啊上兰克史机的发</div>
<div class="textcont">
<p>透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果</p>
<p>透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果</p>
<p>透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果</p>
<p>透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果</p>
<p>透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果透明效果</p>
</div>
<div id="content">
</div>
</body>
三、Alibaba模式
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<div><a href="javascript:void(0);" onclick="openPrivacyLayer()">显示</a></div>
<div style="width:100%; height:500px;background-color:#cc0000;"></div>
<script type="text/javascript">
function openPrivacyLayer(){
var greyLayer = document.getElementById('greyLayer');
with(greyLayer.style){
display = 'block';
height = document.body.scrollHeight+'px';
width = document.body.scrollWidth+'px';
}
var privacyLayer = document.getElementById('privacyLayer');
with(privacyLayer.style){
display = 'block';
left = ((window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.offsetWidth)-800)/2+'px';
top = document.documentElement.scrollTop+((window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.offsetHeight)-500)/2+'px';
}
}
function closePrivacy(){
document.getElementById('greyLayer').style.display = 'none';
document.getElementById('privacyLayer').style.display = 'none';
}
</script>
<style type="text/css">
#greyLayer{position:absolute;top:0;left:0;background-color:#fff;display:none;opacity:.5;filter:alpha(opacity=50)}
#privacyLayer{width:800px;height:500px;border:1px solid #656451;position:absolute;top:200px;left:300px;background-color:#fff;display:none;z-index:10000; text-align:center;}
#privacyLayer .title{line-height:30px;font-weight:bold;padding:0;margin:0;font-size:16px;text-align:center;background-color:#FFFFCF;border-bottom:1px solid #656451}
#privacyLayer .con{}
#privacyLayer .btn{line-height:20px;text-align:center;margin-top:20px;}
#privacyLayer .r{line-height:40px;color:#000;font-weight:bold;font-size:14px;}
#privacyLayer .c{line-height:40px;color:#000;font-size:13px;}
</style>
<!--<div id="greyLayer"></div>本来是用这个，后来因为用它有的HTML标记比它先显示，所以不用了。-->
<iframe id="greyLayer" frameborder="0"></iframe>
<div id="privacyLayer">
<h1 class="title"> Alibaba 服 务 条 款</h1>
<div class="r">请仔细阅读本协议</div>
<div class="c">阿里巴巴公司根据以下条件和条款提供您所享有的服务</div>
<div id="privacyContent" class="con">
<textarea cols="80" rows="25" wrap="VIRTUAL" style="width:90%;font-size:14.9px;height:320px;" readonly>
欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
1. 接受条款。
以任何方式进入阿里巴巴中文网站即表示您同意自己已经与阿里巴巴订立本协议，且您将受本协议的条款和条件("条款") 约束。阿里巴巴可随时自行全权决定更改"条款"。如"条款"有任何变更，阿里巴巴将在其网站上刊载公告，通知予您。如您不同意相关变更，必须停止使用"服务"。经修订的"条款"一经在阿里巴巴网站的公布后，立即自动生效。您应在第一次登录后仔细阅读修订后的"条款"，并有权选择停止继续使用"服务"；一旦您继续使用"服务"，则表示您已接受经修订的"条款"，当您与阿里巴巴发生争议时，应以最新的服务协议为准。除另行明确声明外，任何使"服务"范围扩大或功能增强的新内容均受本协议约束。除非经阿里巴巴的授权高层管理人员签订书面协议，本协议不得另行作出修订。
</textarea>
</div>
<div class="btn"><button onclick="closePrivacy()">阅读完毕，关闭窗口</button></div>
</div>
</div>
特别注意：如果没有在XHTML情况下document.body.scrollTop代替document.documentElement.scrollTop
- DIV模仿窗口效果
- jQuery模仿window7窗口弹出效果
- Qt模仿Android、IOS滑动窗口效果
- DIV蒙版/遮罩效果锁定窗口
- JavaScript弹出窗口DIV层效果代码
- JavaScript弹出窗口DIV层效果代码 [
- JAVASCRIPT弹出窗口DIV层效果代码
- jQuery实现Div窗口震动效果
- CSDN_Delete_Confirm (DIV模仿Confirm)
- 用javascript DOM模仿QQ窗口抖动效果（超级简单哦~~·）
- 使用JavaScript完成最简单加密解密和模仿QQ的窗口抖动效果
- Jquery教程:JS弹出窗口DIV层效果代码
- DIV+CSS：用CSS模拟窗口显示效果；
- 弹出窗口/拦截页效果实现（div）
- 模仿QZONE挂图效果
- 模仿google导航效果
- 模仿launcher的效果
- 模仿facebook布局效果
- MatLab 知识小结
- 常见c++面试题
- 我当上校内之星的小秘密
- 绝对受用的求职经验分享，是天津大学一牛人写的，很
- 麻将中的牌类
- DIV模仿窗口效果
- 华为C笔试真题，希望对即将找工作的人有一些帮助啊！
- 操作符 “==” 与对象的 equals() 方法
- 无限地等待
- 解决JAVA获取Windows系统时间问题
- 向USBKey中导入证书私钥
- 世界搜索引擎——主要国外(一)
- PKU 2236 Wireless Network（并查集）
- putty使用方法，中文教程
