我是编码新手,希望创建三个按钮来打开三种不同的模式——到目前为止,我只是想让最后一个按钮的内容显示在所有三个模式中(当我将其注释掉时,第二个按钮适用于前两个按钮,当它被注释掉时,第一个按钮适用于第一个按钮)。我试过将 div 更改为类,但无济于事。任何帮助,将不胜感激!
HTML:
<!--First Button-->
<div class="btn">
<button id="btn-name">
<h1>NAME</h1>
</button>
</div>
<br>
<div class="btn">
<button id="btn-news">
<h1>NEWS</h1>
</button>
</div>
<br>
<div class="btn">
<button id="btn-cv">
<h1>CV</h1>
</button>
</div>
<!-- The Modal -->
<div id="modal1" class="modal1">
<!-- Modal content -->
<div class="modal1-content">
<span class="close1">×</span>
<h4>ONE</h4>
<h4>CONTACT</h4>
<p>. . .</p>
</div>
</div>
<!--Second Button-->
<!-- The Modal -->
<div id="modal2" class="modal2">
<!-- Modal content -->
<div class="modal2-content">
<span class="close2">×</span>
<h4>TWO</h4>
<h4>CURRENTLY</h4>
</div>
</div>
<!--Third Button-->
<!-- The Modal -->
<div id="modal3" class="modal3">
<!-- Modal content -->
<div class="modal3-content">
<span class="close3">×</span>
<h4>THREE</h4>
<h4>EDUCATION</h4>
</div>
</div>
JS:
<script>
// Get the modal
var modal = document.getElementById("modal1");
// Get the button that opens the modal
var btn = document.getElementById("btn-name");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!--Second Button-->
<script>
// Get the modal
var modal = document.getElementById("modal2");
// Get the button that opens the modal
var btn = document.getElementById("btn-news");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!--Third Button-->
<script>
// Get the modal
var modal = document.getElementById("modal3");
// Get the button that opens the modal
var btn = document.getElementById("btn-cv");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
我猜这段代码中有很多冗余。 . . 乐观地说,
捷腾
最佳答案
您的代码的问题是您声明了 var modal
和 var btn
为您的 3 个模式和按钮使用相同的名称。
使用多个 <script></script>
并不意味着它们与其他代码分开。
尝试用不同的名称声明。
示例代码:
<script>
// Get the modal
var modal1 = document.getElementById("modal1");
// Get the button that opens the modal
var btn1 = document.getElementById("btn-name");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
<!--Second Button-->
<script>
// Get the modal
var modal2 = document.getElementById("modal2");
// Get the button that opens the modal
var btn2 = document.getElementById("btn-news");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
</script>
<!--Third Button-->
<script>
// Get the modal
var modal3 = document.getElementById("modal3");
// Get the button that opens the modal
var btn3 = document.getElementById("btn-cv");
// Get the <span> element that closes the modal
var span3 = document.getElementsByClassName("close3")[0];
// When the user clicks the button, open the modal
btn3.onclick = function() {
modal3.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span3.onclick = function() {
modal3.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
}
</script>
另外,如果您有此类代码。只需使用一个 <script></script>
仅。
关于javascript - 模式仅在多个按钮上显示最后一个按钮内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58385780/