HTML代码
<body>
<!--用来引出悬浮窗口的div-->
<div>
<a href="javascript:void(0)" onclick="displayWindow()">
点击显示悬浮窗口
</a>
</div>
<!--悬浮窗口-->
<div id="window" class="window_css">
<a href="javascript:void(0)" onclick="hideWindow()">
关闭悬浮窗口
</a>
</div>
<!--出现悬浮窗口后,背景变暗-->
<div id="shadow" class="shadow_css"></div>
</body>
javascript代码
<script>
/*当点击调用此方法后,将悬浮窗口显示出来,背景变暗*/
function displayWindow() {
/*悬浮窗口的显示,需要将display变成block*/
document.getElementById("window").style.display = "block";
/*将背景变暗*/
document.getElementById("shadow").style.display = "block";
}
/*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
function hideWindow() {
document.getElementById("window").style.display = "none";
document.getElementById("shadow").style.display = "none";
}
</script>
CSS样式代码
<style>
.shadow_css {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 10;
/* 为mozilla firefox 设置透明度 */
-moz-opacity: 0.6;
/* 设置透明度 */
opacity: .60;
/* 为IE 设置透明度 */
filter: alpha(opacity=66);
}
.window_css {
display: none;
position: absolute;
top: 20%;
left: 25%;
width: 50%;
height: 60%;
border: 3px solid honeydew;
background-color: aliceblue;
z-index: 11;
}
</style>
结果示例图