弹框原生遮罩模板

最新推荐文章于 2023-03-02 18:18:08 发布

前端小云儿

最新推荐文章于 2023-03-02 18:18:08 发布

阅读量70

点赞数

分类专栏： js

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

版权

js 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title>弹框原生使用z-index是必须先定位</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>
               .backdrop {
           position: fixed;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
               z-index:998;
           background-color: rgba(0,0,0,.3);
           }
           .displaynone{
               display: none;
           }
           .div2{
               /* 使用z-index是必须先定位 */
               position: fixed;
               bottom: 0;
               z-index: 999;
               color: red;
               background-color: #ffffff;
               width: 200px;
               height: 200px;

           }
       </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">
           <div class="div1" id="div1">江湖</div>
           <div class="div2 displaynone" id="div2">
               <div>12</div>
               <div>12</div>
               <button id="jianghu">jianghu</button>
               <div>12</div>
               <div>12</div>
               <div>12</div>

           </div>
           <div class="div1">江湖</div>
       </div>
       <div class="kong" id="kong">江湖22222222</div>
   </body>
   <script src="../js/mui.min.js"></script>
   <script>
       document.getElementById('div1').addEventListener('tap',function () {
           document.getElementById('kong').classList.add('backdrop');
       document.getElementById('div2').classList.remove('displaynone');
       })

       document.getElementById('jianghu').addEventListener('tap',function () {
       alert(234);
               document.getElementById('kong').classList.remove('backdrop');
       })
   </script>

</html>

前端小云儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
弹框原生遮罩模板

<!doctype html><html> <head> <meta charset="utf-8"> <title>弹框原生使用z-index是必须先定位</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,u...
复制链接

扫一扫