How to change modal content when button is clicked

May 10, 2023

I have 2 modals (box1 and box2) in my code box2 is on top of box1. Both of them have buttons. How can I make my modal 1 appears first and then only when you click his button the content changes to box2 (making box1 disappear)? In my original code I have 4 modals actually but i’ll addapt to it later. Also if is possible I would like that this content transition was smooth.
OBS: Please open the code snippet in full page so that the modal shows up

    .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>

>Solution :

Add an addEventListener to the button to listen for a click event. Then add a class to CSS to hide elements and give all the elements that should be hidden in that class. Last but not least remove the class from the element you want to show and add it to the element you need to hide.

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>