css-mui弹处层处理

前端小云儿

于 2021-08-28 10:06:57 发布

阅读量225

点赞数

分类专栏： css mui 文章标签： css3

本文链接：https://blog.csdn.net/jieweiwujie/article/details/119964409

版权

css 同时被 2 个专栏收录

75 篇文章 1 订阅

订阅专栏

mui

16 篇文章 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">111点击此打开中间的弹出层</a>
       </div>
       <div id="div"></div>
       <div id="popover" class="mui-popover" style="height: 250px;">
           <div class="mui-popover-arrow"></div>
           <div>
               这是自定义的弹框
           <button>12</button>
           <button id="xiaoshi">34</button>
           <button>56</button>
           </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"));
           })


           document.getElementById("xiaoshi").addEventListener("tap", function() {
               //调用隐藏/显示弹出层
               mui("#popover").popover('toggle', document.getElementById("div"));
           })
       </script>
   </body>
</html>