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

作者：笔触狂放9 | 2024-02-18 20:26:43

踩

html点击按钮弹出浮动框

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/110348