原生js写简易模态框

苍岚王

于 2022-08-28 10:28:09 发布

阅读量205

点赞数 2

分类专栏： html 文章标签： html servlet css

本文链接：https://blog.csdn.net/q2432315767/article/details/126567089

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上图

上代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body class="body">


       <div class="box" style="width: 200px;height: 200px;background-color: aqua;margin: 200px auto;position: relative;">
           <button class="btn">登录</button>


           <div class="login" ><div>是否登录</div>
               <button class="btn">确认</button>
               <button class="btn">取消</button>
           </div>
       </div>

       <style>
           .login{
               width: 100px;
               height: 100px;
               background-color: red;
               position: absolute;
               bottom: 30px;
               left: 50%;
               margin-left: -50px;
               opacity: 0;
               transition: all 0.4s linear;
           }

       </style>
       <script>


           var btn=document.getElementsByClassName("btn")[0]
           var login=document.getElementsByClassName("login")[0]
           var req=document.getElementsByClassName("btn")[1]
           var res=document.getElementsByClassName("btn")[2]

           var body=document.getElementsByClassName("body")[0]
           btn.οnclick=function(){
               // console.log("点击成功");
               btn.style.opacity=0
               login.style.opacity=1
               login.style.bottom=0
               body.style.backgroundColor ="black"

           }

           req.οnclick=function(){
               // console.log("点击成功");
               alert("登录成功")
               btn.style.opacity=1
               login.style.opacity=0

               body.style.backgroundColor =""
               login.style.bottom='30px'
           }
           res.οnclick=function(){
               // console.log("点击成功");
               alert("取消登录")
               btn.style.opacity=1
               login.style.opacity=0

               body.style.backgroundColor =""
               login.style.bottom='30px'
           }

       </script>
   </body>
</html>