错误运行多模态

错误运行多模态

问题描述：

当我运行多模态这样，他们表现出的问题，第一关都在这里是一个模态错误运行多模态

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myImg { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg:hover {opacity: 0.7;} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
 
} 
 

 
/* Modal Content (image) */ 
 
.modal-content { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
} 
 

 
/* Caption of Modal Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
/* Add Animation */ 
 
.modal-content, #caption {  
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: zoom; 
 
    animation-duration: 0.6s; 
 
} 
 

 
@-webkit-keyframes zoom { 
 
    from {-webkit-transform:scale(0)} 
 
    to {-webkit-transform:scale(1)} 
 
} 
 

 
@keyframes zoom { 
 
    from {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: 0.3s; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #bbb; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
/* 100% Image Width on Smaller Screens */ 
 
@media only screen and (max-width: 700px){ 
 
    .modal-content { 
 
     width: 100%; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Image Modal</h2> 
 
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p> 
 
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p> 
 

 
<img id="myImg" src=https://dummyimage.com/200x200/000/323ffa" alt="Trolltunga, Norway" width="300" height="200"> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">&times;</span> 
 
    <img class="modal-content" id="img01"> 
 
    <div id="caption"></div> 
 
</div> 
 

 
<script> 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 
var img = document.getElementById('myImg'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

这种运作良好，并罚款，但添加另一个代码图片（如链接到模式导致其无法打开）

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myImg { 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    transition: 0.3s; 
 
} 
 

 
#myImg:hover {opacity: 0.7;} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    padding-top: 100px; /* Location of the box */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
 
} 
 

 
/* Modal Content (image) */ 
 
.modal-content { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
} 
 

 
/* Caption of Modal Image */ 
 
#caption { 
 
    margin: auto; 
 
    display: block; 
 
    width: 80%; 
 
    max-width: 700px; 
 
    text-align: center; 
 
    color: #ccc; 
 
    padding: 10px 0; 
 
    height: 150px; 
 
} 
 

 
/* Add Animation */ 
 
.modal-content, #caption {  
 
    -webkit-animation-name: zoom; 
 
    -webkit-animation-duration: 0.6s; 
 
    animation-name: zoom; 
 
    animation-duration: 0.6s; 
 
} 
 

 
@-webkit-keyframes zoom { 
 
    from {-webkit-transform:scale(0)} 
 
    to {-webkit-transform:scale(1)} 
 
} 
 

 
@keyframes zoom { 
 
    from {transform:scale(0)} 
 
    to {transform:scale(1)} 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 35px; 
 
    color: #f1f1f1; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    transition: 0.3s; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #bbb; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
/* 100% Image Width on Smaller Screens */ 
 
@media only screen and (max-width: 700px){ 
 
    .modal-content { 
 
     width: 100%; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Image Modal</h2> 
 
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p> 
 
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p> 
 

 
<img id="myImg" src="https://dummyimage.com/200x200/000/323ffa" alt="Trolltunga, Norway" width="300" height="200"> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">&times;</span> 
 
    <img class="modal-content" id="img01"> <div id="caption"></div> 
 
</div> 
 

 
<img id="myImg" src=https://dummyimage.com/200x200/000/323ffa alt="Trolltunga,  Norway" width="300" height="200"> 
 

 
<!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 
    <span class="close">&times;</span> 
 
    <img class="modal-content" id="img01"> 
 
    <div id="caption"></div> 
 
</div> 
 

 
<script> 
 
// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the image and insert it inside the modal - use its "alt" text as a caption 
 
var img = document.getElementById('myImg'); 
 
var modalImg = document.getElementById("img01"); 
 
var captionText = document.getElementById("caption"); 
 
img.onclick = function(){ 
 
    modal.style.display = "block"; 
 
    modalImg.src = this.src; 
 
    captionText.innerHTML = this.alt; 
 
} 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

现在哟可以清楚地看到，第一图像可以打开模态的第二不能这样做，任何人都可以提出一个办法做到这一点的模态的事情多张图片

答

它们具有相同的ID：
ID =“myImg” 更改ID和它的工作。

Guyz复制模式js脚本thanx，但影子的影响只有第一张照片它不在那里其余的请帮助 –

看看你的CSS你有#myImg。改变它到你的新id。 –

答

ID应该是唯一的，并且一次只能用于一个元素。在你的代码，更改第二个模式，以“ID =” myImg2" 的ID =“myImg”，取而代之的ID

Thanx所有关闭你它比你的作品thanx支持 –

@christotony如果它的工作，请接受给出的答案之一，所以我们可以关闭这个话题，以备将来的关注;） – Omnitored

Guyz thanx，但影子的影响只存在于第一张照片，它不适用于res t请帮助 –

答

不能具有相同ID的两个元素。

Guyz thanx，但影子的影响只在第一张照片中出现，因此其他人请帮忙 –

相关推荐