mui中popover居中问题
2019-07-01
阅读数：2724
之前做的一个项目使用了mui，如何在mui中处理popover居中的问题？把之前记录的笔记也贴下上来，保持博客一天一篇的文章，让百度spider天天来。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>mui中popover居中问题</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">
.mui-popover{
position: fixed;
width: 80%;
height: 70%;
border-radius: 0;
left: 50%;
top: 50%;
margin: 0 auto;
z-index: 9999;
background-color: #fff;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.mui-popover-arrow{
display: none;
}
</style>
</head>
<body>
<div id="pop" class="mui-popover" >
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
</ul>
</div>
<a id="openPopover" class="mui-btn mui-btn-primary">打开弹出菜单</a>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
var pop = document.getElementById("pop");
var mask = mui.createMask(function(){
pop.classList.remove('mui-active');
});
// 显示
mui('#openPopover')[0].addEventListener('tap',function(){
mask.show();//显示遮罩
pop.classList.add('mui-active');
})
</script>
</body>
</html>生成的效果图大概就是以下的样子了：
声明: 本文采用
BY-NC-SA 协议进行授权. 转载请注明转自:
mui中popover居中问题
不能用过渡 一旦用过渡会偏移位置然后再居中
回复