MUI popover 自定义位置弹出层

最新推荐文章于 2023-01-09 14:43:28 发布

iwusan

最新推荐文章于 2023-01-09 14:43:28 发布

阅读量2.9w

点赞数 2

分类专栏： MUI

本文链接：https://blog.csdn.net/qq_25027593/article/details/79910648

版权

MUI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
			/*移除底部或顶部三角,需要在删除此代码*/
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">自定义位置弹出层</h1>
		</header>
		<div class="mui-content">
			<a id="test">点击此打开中间的弹出层</a>
		</div>
		<div id="div"></div>
		<div id="popover" class="mui-popover" style="height: 250px;">
			<div class="mui-popover-arrow"></div>
			<div>我是自定义位置弹出层</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			document.getElementById("test").addEventListener("tap", function() {
				//调用隐藏/显示弹出层
				mui("#popover").popover('toggle', document.getElementById("div"));
			})
		</script>
	</body>
</html>

通过#div css的top与left控制弹出层的位置

iwusan

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
9
评论
MUI popover 自定义位置弹出层

&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=
复制链接

扫一扫

专栏目录