点击文字或者按钮在本页面中弹出悬浮小窗口

魅力丛林

已于 2022-07-25 21:42:51 修改

阅读量3.9k

点赞数 2

文章标签： firefox javascript 前端

于 2022-07-25 21:40:39 首次发布

本文链接：https://blog.csdn.net/meiliconglin/article/details/125983998

版权

这篇博客介绍了如何使用HTML、CSS和JavaScript来创建一个弹出的悬浮窗口，并在打开窗口时使页面背景变暗。通过点击链接触发`displayWindow()`函数，显示悬浮窗口和黑色半透明背景层，而`hideWindow()`函数则用于关闭窗口和恢复背景亮度。示例代码中定义了`.shadow_css`和`.window_css`类，分别用于设置阴影和窗口的样式。

摘要由CSDN通过智能技术生成

<!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=utf-8" />
<title>弹出DIV窗口</title>
<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: 40%;
			height: 60%;
			border: 3px solid honeydew;
			background-color: aliceblue;
			z-index: 11;
		}
	</style>

</head>

<body>
		<!--用来引出悬浮窗口的div-->
		<div>
			<a href="javascript:void(0)" onclick="displayWindow()">
				点击显示悬浮窗口
			</a>
		</div>
		<!--悬浮窗口-->
		<div id="window" class="window_css">
			
<div style="text-align:right; line-height:20px;">

<a href="javascript:void(0)" onclick="hideWindow()">X</a>
<div class="clear"></div>
<iframe src="../tan.php?20220103" width="100%" height="60%"  frameborder="0" scrolling="no" ></iframe>
</div>

		</div>
		<!--出现悬浮窗口后,背景变暗-->
		<div id="shadow" class="shadow_css"></div>
	</body>
<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>

</html>