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

<!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
    评论
首先,在布局文件中定义悬浮按钮的样式: ``` <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/floating_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Floating Button" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="16dp"/> </RelativeLayout> ``` 然后,在Activity中实现悬浮按钮: ``` public class MainActivity extends AppCompatActivity { private WindowManager windowManager; private Button floatingButton; private WindowManager.LayoutParams params; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //获取WindowManager windowManager = (WindowManager) getSystemService(WINDOW_SERVICE); //创建悬浮按钮 floatingButton = new Button(this); floatingButton.setText("Floating Button"); //设置悬浮按钮的参数 params = new WindowManager.LayoutParams( WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY, WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, PixelFormat.TRANSLUCENT ); //设置悬浮按钮的位置和大小 params.gravity = Gravity.TOP | Gravity.START; params.x = 0; params.y = 0; params.width = WindowManager.LayoutParams.WRAP_CONTENT; params.height = WindowManager.LayoutParams.WRAP_CONTENT; //将悬浮按钮添加到WindowManager中 windowManager.addView(floatingButton, params); //设置悬浮按钮点击事件 floatingButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //TODO: 点击悬浮按钮的操作 } }); } @Override protected void onDestroy() { super.onDestroy(); //移除悬浮按钮 if (floatingButton != null) { windowManager.removeView(floatingButton); } } } ``` 需要注意的是,在Android 8.0及以上的版本中,需要使用`WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY`来创建悬浮窗口。同时,需要在AndroidManifest.xml中添加`<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>`权限。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值