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

<!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>

在这里插入图片描述

  • 2
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值