JS实现下拉菜单登录注册弹窗

PHP中文网 • 2025年3月8日 12:39:44 • 编程技术 • 阅读 2

这次给大家带来JS实现下拉菜单登录注册弹窗，JS实现下拉菜单登录注册弹窗的注意事项有哪些，下面就是实战案例，一起来看一下。

下拉菜单列表

     *{      margin: 0px;      padding: 0px;    }    .menu{      width: 1100px;      height: 30px;      background-image: url(img/魅力罗兰Music炫图18.jpg);      margin-left: 200px;      margin-top: 50px;    }    .btn{      width: 183.3px;      height: 30px;      float: left;      text-align: center;      line-height: 30px;      font-size: 14px;      position: relative;      overflow: hidden;      transition: 0.5s;    }    .btn:hover{      cursor: pointer;      background-color: burlywood;      color: white;      max-height: 200px;      overflow: visible;    }    .btn ul{      list-style: none;      background-color: #008000;    }                    
罗兰首页
      歌曲专栏        
          流行
          摇滚
          蓝调
          民谣
        
      
      音乐人专栏        
          内地
          欧美
          日韩
          港台
        
      
      乐器专栏        
          钢琴
          小提琴
          吉他
          架子鼓
        
      
      戏曲专栏        
          京剧
          话剧
          豫剧
          黄梅戏
        
      
      魅力ROLAND体验区        
          新曲
          唱片
          MV

登录后复制

登录注册效果

                    * {        margin: 0px;        padding: 0px;      }            .login {        width: 100px;        height: 30px;        font-size: 25px;        line-height: 30px;        border: 1px solid black;        text-align: center;        background-color: darkcyan;        color: white;      }            .login:hover {        cursor: pointer;        background-color: greenyellow;      }            .mask {        width: 100%;        background-color: black;        opacity: 0.5;        position: absolute;        top: 0px;        left: 0px;        z-index: 90;      }            .log-p {        width: 500px;        height: 300px;        background-color: white;        position: fixed;        z-index: 99;      }            
    
    登 录
    123
123
123
123
123
123
123
    123
123
123
123
123
123
123
    123
123
123
123
123
123
123
    123
123
123
123
123
123
    var mask = document.getElementsByClassName("mask")[0];  var login = document.getElementsByClassName("log-p")[0];  var btn = document.getElementsByClassName("login")[0];  var clientWidth = document.body.clientWidth;  var clientHeight = document.documentElement.clientHeight;  login.style.left = clientWidth / 2 - 250 + "px";  login.style.top = clientHeight / 2 - 150 + "px";    mask.style.height = document.body.clientHeight + "px";  window.onresize = function() {    var clientWidth = document.body.clientWidth;    var clientHeight = document.documentElement.clientHeight;    login.style.left = clientWidth / 2 - 250 + "px";    login.style.top = clientHeight / 2 - 150 + "px";  }    btn.onclick = function(){    mask.removeAttribute("hidden");    login.removeAttribute("hidden");  }    mask.onclick = function(){    mask.setAttribute("hidden","");    login.setAttribute("hidden","hidden");  }