Heim > Artikel > Web-Frontend > JS implementiert ein Popup-Fenster für die Anmeldung und Registrierung im Dropdown-Menü

JS implementiert ein Popup-Fenster für die Anmeldung und Registrierung im Dropdown-Menü

php中世界最好的语言Original: 2018-04-19 11:11:162466Durchsuche

Dieses Mal zeige ich Ihnen die JS-Implementierung des Dropdown-Menüs Anmelde- und Registrierungs-Popup-Fenster. Was sind die Vorsichtsmaßnahmen für die JS-Implementierung des Dropdown-Menüs? Anmelde- und Registrierungs-Popup-Fenster. Das Folgende ist ein praktischer Fall.

Dropdown-MenüListe

 <style>
    *{
      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;
    }
    
  </style>
  
  <body>
    <p class="menu">
      <p class="btn">罗兰首页</p>
      <p class="btn">歌曲专栏
        <ul>
          <li>流行</li>
          <li>摇滚</li>
          <li>蓝调</li>
          <li>民谣</li>
        </ul>
      </p>
      <p class="btn">音乐人专栏
        <ul>
          <li>内地</li>
          <li>欧美</li>
          <li>日韩</li>
          <li>港台</li>
        </ul>
      </p>
      <p class="btn">乐器专栏
        <ul>
          <li>钢琴</li>
          <li>小提琴</li>
          <li>吉他</li>
          <li>架子鼓</li>
        </ul>
      </p>
      <p class="btn">戏曲专栏
        <ul>
          <li>京剧</li>
          <li>话剧</li>
          <li>豫剧</li>
          <li>黄梅戏</li>
        </ul>
      </p>
      <p class="btn">魅力ROLAND体验区
        <ul>
          <li>新曲</li>
          <li>唱片</li>
          <li>MV</li>
        </ul>
      </p>
    </p>
    
  </body>

Login-Registrierungseffekt

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      * {
        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;
      }
    </style>
  </head>
  <body>
    <p class="mask" hidden></p>
    <p class="log-p" hidden="hidden"></p>
    <p class="login">登 录</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
  </body>
</html>
<script>
  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");
  }
</script>

Verwandte Artikel!

Empfohlene Lektüre:

JS implementiert die Bewertung mit Bewertungssternen

js implementiert das Ein- und Ausblenden von Bildern gleichzeitig gleichmäßige Geschwindigkeit

Das obige ist der detaillierte Inhalt vonJS implementiert ein Popup-Fenster für die Anmeldung und Registrierung im Dropdown-Menü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie man mit http-gekaperten Floating-Anzeigen umgehtNächster Artikel：Wie man mit http-gekaperten Floating-Anzeigen umgeht

In Verbindung stehende Artikel

Mehr sehen