mui 悬浮窗口实现

最新推荐文章于 2022-01-17 20:32:50 发布

原创最新推荐文章于 2022-01-17 20:32:50 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#mui #mui悬浮窗口

APP 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在网页中实现悬浮窗口的两种不同方法。一种是使用plus.webview.create创建浮动视图，通过JavaScript控制显示与关闭；另一种是利用HTML、CSS和JavaScript组合，通过修改元素的display属性来实现悬浮框的显示与隐藏。两种方法均适用于移动端网页应用，提供了详细的代码示例。

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

方式一

html：

<div class="button" onclick="floatWebview()">悬浮窗口</div>

javascript：

// 创建悬浮窗口
var floatw=null;
function floatWebview(){
	if(floatw){ // 避免快速多次点击创建多个窗口
		return;
	}
	floatw=plus.webview.create("webview_float.html","webview_float.html",{width:'200px',height:'200px',margin:"auto",background:"rgba(0,0,0,0.8)",scrollIndicator:'none',scalable:false,popGesture:'none'});
	floatw.addEventListener("loaded",function(){
		floatw.show('fade-in',300);
		floatw=null;
	},false);
}

webview_float.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body style="margin:0;padding:0;width:100%;height:100%;text-align:center;">
		<img src="../img/ui.png"/>
		<div style="width:100%;position:fixed;bottom:0;">
			<div class="button" onclick="back()">关　闭</div>
		</div>
	</body>
</html>

详情可以参考mui H5+ 官方示例中窗口管理

效果

=================================================================

方式二

html:

<div id="floatWebview" class="mui-backdrop">
			<div class="vertical">
				<div>
					<h3>xxx</h3>
					<p style="margin-top: 10px;text-align: left;">
						小地方地方双方都收到防守打法水电费胜多负少的发送到dfs反倒是
						<p style="text-align: left;">鼎折覆餗地方</p>
						<p style="text-align: left;">发V型从v从V型从</p>

					</p>
				</div>
				<p id="close_popup" class="vertical_p">
					确定
				</p>
			</div>
		</div>

css:

.vertical {
				width: 60%;
				height: auto;
				margin: 35% auto;
				text-align: center;
			}
			
			.vertical div {
				background-color: #FFFFFF;
				padding: 10px 10px;
				border-radius: 25px 25px 0 0;
			}
			
			.vertical_p{
				border-radius: 0 0 25px 25px;
				bottom: 0px;
				padding: 10px 0px;
				background-color: #0062CC;
				color: #FFFFFF;
			}
			
			.mui-backdrop {
				background-color: rgba(0, 0, 0, 0.7);
				display: none;
			}

javascript:

/*显示悬浮框*/
document.getElementById('custom_popup').style = "display:block;";

/*隐藏悬浮框*/
document.getElementById('custom_popup').style = "display:none;";

效果跟方式1一样

===========================================

仅供参考，谢谢~