JavaScript图像模式未打开
JavaScript图像模式未打开
提问于 2018-10-29 07:40:02
我正在做一个班级作业，正在努力创建一个JavaScript图像模型。
我能够让图像看起来像是可点击的，但它们不能打开为模式。我不清楚我的代码的哪一部分是不正确的。
我直接使用W3Schools模式教程中的代码，但没有用。任何帮助都将不胜感激！
下面我已经包含了我所有的代码(CSS、JS和EJS)以供查看。我很好奇是不是代码搞砸了，因为我同时使用了Bootstrap Jumbotron和Bootstrap网格系统来使这些图像格式化良好，更加美观。
//get modal
var modal = document.getElementById('myModal');
//get the image and insert it into modal - use its "alt" text as caption
var img = document.getElementsByClassName('portfolioImages');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.addEventListener;
}
//Get the <span> element that closes the modal
var span = document.getElementById("close")[0];
//When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display="none";
} /* Style image used to trigger modal */
.portfolioImages {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.portfolioImages:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left:0;
top:0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
/*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 - Zoom in the Modal*/
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@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;
} <div class="jumbotron" id="skills">
<h1>Check Out My Design Work: <a href="https://www.slideshare.net/AmyWhite95"><img src='images/slideshow.jpg' height="100px"
width="100px" /></a></h1>
<br />
<!--Trigger Modal-->
<div class="container">
<div class="row">
<div class="column">
<div class="Incontent">
<img class="portfolioImages" src="images/Cards1.JPG" alt="Card Design" style="width:100%" height="500px">
<h3>Card Design</h3>
<p>This was for a project in Typography I. The goal was to design and print a deck of cards
along with a box.</p>
</div>
</div>
<div class="column">
<div class="Incontent">
<img class="portfolioImages" src="images/FrontPageNewsWhite.jpg" alt="Newspaper Design" style="width:100%" height="500px">
<h3>Newspaper Design</h3>
<p>This was a project for Media Design. The goal was to design the front page of a magazine
with good headlines and layout.</p>
</div>
</div>
<div class="column">
<div class="Incontent">
<img class="portfolioImages" src="images/WhiteAInfographic.jpg" alt="Infographic Design" style="width:100%" height="500px">
<h3>Infographic</h3>
<p>This was a project for Media Design. The goal was to design a well titled and laid out
infographic.</p>
</div>
</div>
<div class="column">
<div class="Incontent">
<img class="portfolioImages" src="images/vectorgirlJPG.jpg" alt="Vector Design" style="width:100%" height="500px">
<h3>Vector Design</h3>
<p>This was a project for Computer Graphics I. The goal was to vectorize a portrait with
Adobe
Illustrator.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="column">
<div class="Outcontent">
<img class="portfolioImages" src="images/WhiteAWebsite.jpg" alt="Website Design" style="width:100%" height="500px">
<h3>Website Design</h3>
<p>This was for a project in Media Design. The goal was to re-design a bad website.</p>
</div>
</div>
<div class="column">
<div class="Outcontent">
<img class="portfolioImages" src="images/SpecSheet1.JPG" alt="Spec Sheet Front" style="width:100%" height="500px">
<h3>Spec Sheet (Front)</h3>
<p>This was a project for Typography I. The goal was to design a spec sheet with provided
material.</p>
</div>
</div>
<div class="column">
<div class="Outcontent">
<img class="portfolioImages" src="images/SpecSheet2.JPG" alt="Spec Sheet Design Back" style="width:100%" height="500px">
<h3>Spec Sheet (Back)</h3>
<p>This was a project for Typography I. The goal was to design a spec sheet with provided
material.</p>
</div>
</div>
<div class="column">
<div class="Outcontent">
<img class="portfolioImages" src="images/TypeForm.JPG" alt="Type Form Design" style="width:100%" height="500px">
<h3>Type Form Design</h3>
<p>This was a project for Typography I. The goal was to create a design using only our
initials.</p>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
回答 1
Stack Overflow用户
发布于 2018-10-29 09:49:55
我使用以下代码为餐厅网站上的弹出菜单创建了一个有效的模式。您可以根据自己的需要对其进行调整。如果你想看到它的实际效果，请访问https://codepen.io/lazav/pen/zLYpEV我不是超级高级的，但我认为我可以创建工作的模态。祝好运。
//get modal1 element for menu
var modal = document.getElementById("menuModal");
//get modal button
var menuLink = document.getElementById("menubtn");
//get close button
var closeBtn = document.getElementsByClassName("closeBtn")[0];
//listen for click event
menuLink.addEventListener("click", openModal);
//listen for click event
closeBtn.addEventListener("click", closeModal);
//function to open Modal
function openModal() {
modal.style.display = "block";
}
//function to close modal
function closeModal() {
modal.style.display = "none";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53037043
复制相关文章
相似问题