css-mui-弹框mui-popover1

最新推荐文章于 2022-04-19 11:44:43 发布

前端小云儿

最新推荐文章于 2022-04-19 11:44:43 发布

阅读量317

点赞数

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

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

版权

css 同时被 2 个专栏收录

75 篇文章 1 订阅

订阅专栏

mui

16 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用mui库创建JavaScript弹框。通过点击按钮触发弹框，弹框内包含可滚动的列表项，点击列表项后关闭弹框。文章详细介绍了HTML结构、CSS样式以及JavaScript事件监听和弹框显示隐藏的实现方法。

摘要由CSDN通过智能技术生成

<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title>mui弹框js</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>
           .div1,.div2{
               transform: translateY(100%);
               position: fixed;
               bottom: 0;
               width: 100%;
           }
           .div11{
               width: 100%;
               height: 100px;
               background-color: #13DAD8;
           }
           .div21{
               width: 100%;
               height: 300px;
               background-color: #8DFF80;
           }
           .div111 ,.div211{
               transform: translateY(0%);
           }



           #popover{
               height: 200px;
               width:200px;
           }

       /*移除底部或顶部三角,需要在删除此代码*/
       .mui-popover .mui-popover-arrow:after {
          width: 0px;
       }

       </style>
   </head>

   <body>
       <header class="mui-bar mui-bar-nav">
           <h1 class="mui-title">mui弹框js</h1>
       </header>
       <div class="mui-content">

<button class="mui-btn-block" id="btn">点击</button>
           <div id="div"></div>
           <div id="popover" class="mui-popover">
               <div class="mui-scroll-wrapper">
                   <div class="mui-scroll">
                       <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>
                           <li class="mui-table-view-cell"><a href="#">Item1</a></li>
                           <li class="mui-table-view-cell"><a href="#">Item2</a></li>
                       </ul>
                   </div>
               </div>
           </div>

       </div>
       
       <script src="../js/mui.min.js"></script>
       <script type="text/javascript">
           mui.init();
           document.getElementById('btn').addEventListener('tap',function () {
           popoverFun();
           })
           mui('.mui-table-view').on('tap','li',function(){
           console.log(this.innerText);
           popoverFun();

           })

           function popoverFun(){
               mui("#popover").popover('toggle', document.getElementById("div"));
           }

           //可以上下滑动
           mui('.mui-scroll-wrapper').scroll();
       </script>
   </body>