首页>>图形网页>>CSS实现弹窗窗口实现半透明效果
CSS实现弹窗窗口实现半透明效果
来源: http://jeamic.blog.163.com/ 时间: 2015-02-12 17:59:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {

background-color: #FFCC66;

border: 1px solid #f00;

text-align: center;

line-height: 40px;

font-size: 12px;

font-weight: bold;

z-index:99;

width: 300px;

height: 120px;

left:50%;/*FF IE7*/

top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */

margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/

position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&

            document.compatMode=='CSS1Compat') ?

            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {

background-color: #666;

width: 100%;

height: 100%;

left:0;

top:0;/*FF IE7*/

filter:alpha(opacity=50);/*IE*/

opacity:0.5;/*FF*/

z-index:1;

position:fixed!important;/*FF IE7*/

position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&

            document.compatMode=='CSS1Compat') ?

            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

-->

</style>

<script language="javascript" type="text/javascript">

function showDiv(){

document.getElementById('popDiv').style.display='block';

document.getElementById('bg').style.display='block';

}

function closeDiv(){

document.getElementById('popDiv').style.display='none';

document.getElementById('bg').style.display='none';

}

</script>

</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;">仿AJAX半透明效果!<br/><br/>

<a href="javascript:closeDiv()">关闭窗口</a></div>

<div id="bg" class="bg" style="display:none;"></div>

<div style="height:1400px; ">

<div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div>

</div>

</body>

</html>

本页地址:http://www.easytd.com/tuxingwangye/d_15021217334.html

上一篇:JavaScript小数取整函数的应用 下一篇:Javascript复制文本内容到剪贴板