- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在想办法让第二张图片出现点击时弹出的效果。第二张图片与第一张图片具有完全相同的代码,即使这样也不会产生相同的弹出效果。很抱歉我的英语不好,我来自日本,我会很感激一些帮助。
#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%;
}
}
<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://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</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>
最佳答案
您永远不应该在不同的元素中设置相同的 ID。 ID 应该是唯一的。当您使用 var img = document.getElementById('myImg');
时,您只选择了第一个元素。
解决方案
一种方法是为两个元素设置相同的类。
<img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
<img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
现在您可以使用 getElementsByClassName
获取这两个元素。
You will get an HTML Collection so you need to parse it to an Array.
var imagesCollection = document.getElementsByClassName('images');
var imagesArray = Array.prototype.slice.call( imagesCollection );
最后一步是为 onclick 处理程序命名,以便您可以使用 map
function imageOnClickHandler(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
imagesArray.map(function (img){
img.onclick = imageOnClickHandler;
})
完整源代码
#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%;
}
}
<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 class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
<img class="images" id="myImg" src="https://cdn.theatlantic.com/assets/media/img/mt/2017/06/GettyImages_675371680/lead_960.jpg?1498239007" alt="Trolltunga, Norway" width="300" height="200">
<link rel="stylesheet" href="/playground/modal.css">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</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 imagesCollection = document.getElementsByClassName('images');
var imagesArray = Array.prototype.slice.call( imagesCollection )
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
imagesArray.map(function (img){
img.onclick = imageOnClickHandler;
})
function imageOnClickHandler(){
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>
关于javascript - 为什么当我点击第二张图片时,它没有像第一张那样弹出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47804771/
我连续有 11 个图像,如果鼠标悬停在其中一个图像上,我希望弹出一个弹出窗口。所以每 11 个图像都有不同的弹出窗口。我已经有一些代码可以执行此操作,但它仅适用于第一张图像。 代码:index.htm
是否可以从 NSColorWell 制作一个 NSColorPanel“弹出”,几乎像一个弹出菜单? 我不喜欢它作为调色板的实现方式,因为有时它与哪个 NSColorWell 关联并不明显。 谢谢!
我正在考虑一个想法,基本上我想要一个带有 NSPopoverController 的 NSStatusItem 。我读到了人们遇到的所有问题,但我只是想尝试一下。现在有干净的方法吗?我见过的所有版本都
如何获取 JS 打开的弹出窗口的 url。这是我的代码: var _url = 'someurlhere'; var popupwindow = window.open(_url, "Popu
我正在设计一个网页,我希望当用户单击链接时,弹出窗口(新窗口)将打开一个链接网页。我的代码如下所示 function win(add,w,h) { window.open(add,"","widt
我正在寻找 C 中的简单堆栈实现,并找到了类似的东西: void pop(struct stack **top) { struct stack *temp; temp = malloc(s
我正在尝试使用 paypal 实现登录,我有 2 个不同的主机域 1- www.example.com 2- www.example.de 对于 paypal,我需要为此目的选择一个返回 URL,我选
我正在尝试找出如何复制此处显示的“弹出式” View 动画:https://imgur.com/a/irFqdiP .我正在使用当前代码来显示我的 viewController,但目前只有一个淡入淡出
有谁知道在 Windows 2000 或更高版本上以编程方式关闭 CD 托盘的方法?打开 CD 托盘存在,但我似乎无法关闭它,尤其是在 W2k 下。 如果可能的话,我特别想从批处理文件中寻找一种方法来
当您访问http://www.daniweb.com时你得到一个弹出窗口,这叫什么 + 知道怎么做吗? 感谢您的回复,只有模态加载动画的最简单方法是什么,即页面加载时动画显示以及动画何时完成? ASP
我正在为 Unity 引擎中的音频过滤器创建一个 C# 脚本。 我的问题是,在通过我的过滤器运行后,生成的音频具有一致且频繁的“咔哒声”、“砰砰声”或“跳过声”。听起来有点像旧 radio 。 我不确
我必须隐藏浏览器的地址栏。我正在使用这段代码: var winFeature = 'location=no,toolbar=no,menubar=no,scrollbars=yes,r
推荐一个button 弹起pickerview的源码,也可以作为工具类使用。 利用inputview 做键盘弹起动画。该如何做呢? 1.继承uiview 2.重写属性&方法
我在这里有一个问题,我已经工作了几个小时。 我正在导入一个 Excel 文件,并使用此代码来执行此操作: Dim objExcel As Excel.Application Di
我基本上是从 UITableViewController 推送 UIView,它包含的只是 UIWebView。但是,当我删除 UIView 以返回到 UITableView 时,应用程序崩溃了。 -
我有几个由导航 Controller 控制的 View Controller 。 例如,viewController A 和 viewController B 都可以将 viewController
我使用新的Gmail API为用户创建草稿。 API响应提供了新创建的消息ID。 然后,我可以使用URL https://mail.google.com/mail/#drafts?compose=[m
Redis列表实现了哪种内部数据结构以实现这一目的?链表将需要O(n)索引,而数组将需要O(n)左/右推/弹出。 最佳答案 根据official documentation,它们被实现为linked
我正在使用 WPF Popup 控件,它显示背景为黑色。我在其中放置了一个 StackPanel 并设置了 Background="Transparent",但这没有帮助。
我希望页面内的容器在事件时占据页面的整个宽度并覆盖在其他所有内容上。这是我目前所拥有的,但它没有按我想要的方式工作: $(function() { $('.main a').click( fu
我是一名优秀的程序员,十分优秀!