如何用js实现半透明蒙层的弹窗

JavaScript016

如何用js实现半透明蒙层的弹窗,第1张

写一个空的div，然后隐藏起来，等需要打开蒙层的时候动态设置其长宽，并显示出来，并且其位置从0.0开始，设置position为absolute。并设置透明度opacity。然后蒙层就有了！然后在这基础上加内容。

首先，您说的亮度应该是图片透明度。

图片透明度调整很简单，只要在图片的属性中加上{filter:alpha(opacity=50)-moz-opacity:0.5-khtml-opacity: 0.5opacity: 0.5}；

opacity是最重要的，因为它是CSS透明的标准属性，取值范围在0-1之间，目前支持的浏览器有：

Firefox、Chrome、Opera、Safari。（也就是说，除了IE，它支持所有主流浏览器）；

filter:alpha(opacity=50)是专门给IE设定的属性，取值的范围在0-100之间；

-moz-opacity是为了兼容一些老版本的Mozilla浏览器，取值范围在0-1之间；

-khtml-opacity是为了兼容一些老版本的Safari浏览器，取值范围在0-1之间。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>简单透明度渐变</title>

</head>

<style type="text/css">

*{margin:0padding:0}

#oDiv{width:200pxheight:200pxmargin:0 autobackground:#000}

</style>

<body>

<div id="oDiv" style="opacity:1">Lee</div>

</body>

<script type="text/javascript">

window.onload = function(){

var timer = setInterval(colorLiner,20)

var val = 100

function colorLiner(){

if(val >= 0){

var oDiv = document.getElementById('oDiv')

oDiv.style.opacity = val/100

val--

}

}

}

</script>

</html>