mui中popover居中问题

2019-07-01 阅读数：517

 之前做的一个项目使用了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居中问题

相关评论

验证码：