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

JavaScript016

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

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

1:通常情况下，我们在编写弹框的时候都会出现一个蒙层，如果弹框没有设置关闭按钮，例如下图，需要点击除了弹框意外的任何地方，来关闭蒙层，这个时候怎么解决呢，首先难点在：弹框是包含在蒙层 div结构里面的，

div结构体如图：

1:方法：比较灵活的方法是将 上层蒙层，和弹框分离开；

2：方法：使用stopPropagation

知识点：stopPropagation() 方法防止调用相同事件的传播。传播意味着向上冒泡到父元素或向下捕获到子元素。从而点击蒙层上面的弹框，组织事件往弹框层向他的父级传递事件：优雅的解决问题！

这两天研究了一下，基本上明白这个效果的实现原理了。以下为实现代码，在火狐下能够通过。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>New Document </title>

</head>

<style type="text/css">

body {background-image:url(http://www.jhsyh.com/line/img/20101210131221154.jpg)}

#bk {background-color:grayopacity:0width:144pxheight:144pxfloat:left}

#icon {position:relativeleft:-136pxtop:8px}

</style>

<body>

<div id="bk"></div>

<img src="http://d.lanrentuku.com/down/png/1202/red_hearts/red_hearts_09.png" id="icon">

</img>

</body>

<script type="text/javascript">

var bk=document.getElementById("bk")

var icon=document.getElementById("icon")

icon.onmouseover=function(){

bk.style.opacity=0.5

}

icon.onmouseout=function(){

bk.style.opacity=0

}

</script>

</html>