我有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>
1条答案
按热度按时间bttbmeg01#
将
addEventListener
添加到按钮以侦听click
事件。然后在CSS中添加一个类来隐藏元素,并给予所有应该在该类中隐藏的元素。最后但并非最不重要的一点是,从要显示的元素中删除类,并将其添加到需要隐藏的元素中。