时间戳

首页 > 解决方案 > 我试图一次制作多个模态

javascript - 我试图一次制作多个模态

问题描述

  1. 当按下不同的按钮时，我编写了代码以显示不同的模式
  2. 当我开始一次添加两个模态时遇到错误
  3. 当所需的按钮发光时，通过按钮按下来触发模态的选择。
  4. 目前第一个按钮在发光时按下时正在工作
  5. 我无法像ABCD其他按钮一样添加不同的模式

   
    var curr_div_on = 0,curr_div_off = 0;
    const key = document.getElementsByClassName("key");
    const closeBtn = document.querySelector('.close');
    var modal1_box = document.querySelector('.modal1');
    var modal2_box = document.querySelector('.modal2');
    var firstpage = document.querySelector('.firstpage');
  
    closeBtn.addEventListener('click', function() {
        modal1_box.style.display = 'none';
        modal2_box.style.display = 'none';
        firstpage.style.display = 'grid';
        
        setPlayingOff() == true;
        setPlayingOn() == true;
        setPlayingOff1() == false;
        setPlayingOn1() == false;
        setPlayingOff2() == false;
        setPlayingOn2() == false;
        var curr_div_on = 0;
        var curr_div_off = 0;
        
    });

    document.addEventListener('keypress', function(){   


if(curr_div_on==1){
  modal1_box.style.display = 'grid';
  modal2_box.style.display = 'grid';
  firstpage.style.display = 'none';

  setPlayingOff() == false;
  setPlayingOn() == false;
  setPlayingOff1() == true;
  setPlayingOn1() == true;
  setPlayingOff2() == true;
  setPlayingOn2() == true;
  

  }

});

function setPlayingOn() {
  key[curr_div_on % 4].classList.add("playing");
  curr_div_on = (curr_div_on + 1) % 4; 
}

function setPlayingOff() {
  key[curr_div_off % 4].classList.remove("playing");
  curr_div_off = (curr_div_off + 1) % 4;
}

setInterval(setPlayingOn, 1000);
setTimeout(() => setInterval(setPlayingOff, 1000), 1000);


var curr_div_on1 = 0,curr_div_off1 = 0;
    const key1 = document.getElementsByClassName("key1");  
   


    function setPlayingOn1() {
      key1[curr_div_on1 % 4].classList.add("playing1");
      curr_div_on1 = (curr_div_on1 + 1) % 4; 
    }

    function setPlayingOff1() {
      key1[curr_div_off1 % 4].classList.remove("playing1");
      curr_div_off1 = (curr_div_off1 + 1) % 4;
    }

    setInterval(setPlayingOn1, 1000);
    setTimeout(() => setInterval(setPlayingOff1, 1000), 1000);


var curr_div_on2 = 0,curr_div_off2 = 0;
    const key2 = document.getElementsByClassName("key2");  
   


    function setPlayingOn2() {
      key1[curr_div_on2 % 4].classList.add("playing1");
      curr_div_on2 = (curr_div_on2 + 1) % 4; 
    }

    function setPlayingOff2() {
      key1[curr_div_off2 % 4].classList.remove("playing1");
      curr_div_off2 = (curr_div_off2 + 1) % 4;
    }

    setInterval(setPlayingOn2, 1000);
    setTimeout(() => setInterval(setPlayingOff2, 1000), 1000);
   * {
  box-sizing: border-box;
}

.firstpage {
  display: grid; 
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;   
  margin-top: 30px;
  margin-left: 30px
}


.key{
  border: 0.1rem solid black;
  border-radius: 0.5rem;
  margin : 1rem;
  padding: 1rem 0.5rem;
  width: 90%;
  text-align: center;
  background: rgba(0,0,0,0.4);
  transition: all 1.0 ease;
  transition-duration: 0.5s;
  letter-spacing: 46px; 
}
.key1{
  border: 0.1rem solid black;
  border-radius: 0.5rem;
  margin : 1rem;
  padding: auto auto auto auto;
  width: 90%;
  text-align: center;
  background: white;
  transition: all 1.0 ease;
  transition-duration: 0.5s;
  letter-spacing: 46px; 
}

.key2{
  border: 0.1rem solid black;
  border-radius: 0.5rem;
  margin : 1rem;
  padding: auto auto auto auto;
  width: 90%;
  text-align: center;
  background: white;
  transition: all 1.0 ease;
  transition-duration: 0.5s;
  letter-spacing: 46px; 
}

.playing{
  transform: scale(1,1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

.playing1{
  transform: scale(1,1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}


.modal1{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: pink;
}
<html>


<div class='firstpage'>
        <div id="key_one" class='key'>ABCDEF</div>
        <div id="key_two" class='key'>GHIJKL</div>
        <div id="key_three" class='key'>MNOPQRS</div>
        <div id="key_four" class='key'>TUVWXYZ</div>
    </div>


  <div id='mode' class='modal1'>
    
    <div class='key1'>A</div>
    <div class='key1'>B</div>
    <div class='key1'>D</div>
    <div class='key1'>E</div>
    <span class="close"></span>
  </div>

   <div id='mode2' class='modal2'>
    
    <div class='key2'>F</div>
    <div class='key2'>G</div>
    <div class='key2'>H</div>
    <div class='key2'>I</div>
    <span class="close"></span>
  </div>
</html>

标签： javascripthtmlcssmodal-dialogcss-transitions

解决方案

推荐阅读