英文:
How to change modal content when button is clicked
问题
Sure, here's the translated part of your text:
我在我的代码中有2个模态框（box1和box2），box2位于box1之上。它们都有按钮。我如何使我的模态框1首先出现，然后只有在单击其按钮后内容才会更改为box2（使box1消失）？在我的原始代码中，实际上有4个模态框，但我以后会进行适应。如果可能的话，我希望这个内容过渡是平滑的。
请在全屏中打开代码片段，以便模态框显示出来。
I have excluded the code part as requested.
英文:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
将按钮添加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');
});
/* 添加的CSS */
.d-none {
display: none;
}
这些是要添加的代码部分，用于实现所描述的功能。
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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');
})
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论