javascript 当按钮被点击时如何改变模态内容

hmmo2u0o  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(164)

我有2个模态(box1和box2)在我的代码中box2在box1的上面。两个都有按钮。我怎样才能使我的模态1出现第一,然后只有当你点击他的按钮的内容更改为box2(使box1消失)?在我的原始代码中,我实际上有4个模态,但我稍后会添加到它。此外,如果可能的话,我希望这个内容的过渡是顺利的。OBS:请以整页方式打开代码片段,以便显示模态

.conteudo {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
}

.box, .box2 {
    width: 100%;
    max-width: 500px;
    background: #fff;
    position: absolute;
    bottom: 0;
    height: 400px;
}

.lineButton button {
    font-size: 14px;
    text-align: center;
    border: 2px solid black;
    padding: 16px;
    border-radius: 16px;
}
<body>
    <div class="conteudo">
        <div class="box">            
            <div class="boxes">
                <div class="modalTxt">
                    <h1>MODAL 1 <br>Accept?</h1>
                    <div class="lineButton">
                        <button type="submit" class="accept1">Accept</button>
                    </div>                           
                </div>         
            </div>
        </div>
        <div class="box2">            
            <div class="boxes">
                <div class="modalTxt">
                    <h1>MODAL 2 <br>Accept?</h1>
                    <div class="lineButton">
                        <button type="submit" class="accept2">Accept</button>
                    </div>                           
                </div>         
            </div>
        </div>
    </div>
</body>
bttbmeg0

bttbmeg01#

addEventListener添加到按钮以侦听click事件。然后在CSS中添加一个类来隐藏元素,并给予所有应该在该类中隐藏的元素。最后但并非最不重要的一点是,从要显示的元素中删除类,并将其添加到需要隐藏的元素中。

const BUTTON_1 = document.querySelector('.accept1');
const BOX_1 = document.querySelector('.box');
const BOX_2 = document.querySelector('.box2');

BUTTON_1.addEventListener('click', function() {
  BOX_1.classList.add('d-none');
  BOX_2.classList.remove('d-none');
})
.conteudo {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
}

.box,
.box2 {
  width: 100%;
  max-width: 500px;
  background: #fff;
  position: absolute;
  bottom: 0;
  height: 400px;
}

.lineButton button {
  font-size: 14px;
  text-align: center;
  border: 2px solid black;
  padding: 16px;
  border-radius: 16px;
}

/* added CSS */
.d-none {
  display: none;
}
<div class="conteudo">
  <div class="box">
    <div class="boxes">
      <div class="modalTxt">
        <h1>MODAL 1 <br>Accept?</h1>
        <div class="lineButton">
          <button type="submit" class="accept1">Accept</button>
        </div>
      </div>
    </div>
  </div>
  <div class="box2 d-none">
    <div class="boxes">
      <div class="modalTxt">
        <h1>MODAL 2 <br>Accept?</h1>
        <div class="lineButton">
          <button type="submit" class="accept2">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题