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

hmmo2u0o 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(163)

我有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>

JavaScript

来源：https://stackoverflow.com/questions/76218929/how-to-change-modal-content-when-button-is-clicked

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-05-12

我来回答

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

1条答案

相关问题

热门标签

最新问答