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

最新推荐文章于 2021-03-05 17:45:53 发布

cj7791

最新推荐文章于 2021-03-05 17:45:53 发布

阅读量1.1w

点赞数 19

文章标签： javascript css html5

本文链接：https://blog.csdn.net/cj7791/article/details/104110938

版权

本文介绍如何使用HTML、CSS和JavaScript创建一个可以显示和隐藏的悬浮窗口。通过设置div元素的display属性，实现悬浮窗的显示与隐藏，并使用背景变暗效果增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

结果示例图

点击出现悬浮窗前