javascript - 图片未在弹出窗口中显示(CSS、HTML、Javascript)
问题描述
目前,我正在建立一个网站,但遇到了问题。我对 CSS、HTML、Javascript 的世界还很陌生,所以也许这对你们大多数人来说是没有道理的,但我面临以下问题。我想在弹出窗口中有一张图片,但是该图片没有显示(在片段中称为“ErrorImage”)。我检查了图像的文件路径是否正确,并且正确。请查看下面的片段。有什么帮助吗?
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 500px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 60px;
left: -50%;
right: -50%;
margin-left: -80px;
opacity: 0.98;
text-align: justify;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<div class="popup" onclick="myFunction()">
<a title="More about us">
<img src="About.JPG" alt="About">
</a>
<span class="popuptext" id="myPopup"><img src="ErrorImage.JPG"<
<p>Example text</p>
</span>
</div>
解决方案
它正在显示,但你的左边是 -50%,这就是它离开屏幕的原因。我已经相应地对其进行了调整,以便它显示在屏幕上。希望这可以帮助。谢谢
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 500px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
margin-left: 0;
opacity: 0.98;
text-align: justify;
top: 100px;
height: 40px;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<div class="popup" onclick="myFunction()">
<a title="More about us">
about
</a>
<span class="popuptext" id="myPopup"><p>Example text</p></span>
</div>
推荐阅读
- ios - 从 iOS 应用程序进行对象检测期间图像模糊
- discord - Discord.py Rewrite 中使用 commands.Greedy 时出错
- java - 无法为 INSERT .. sqlite3 准备语句
- blockchain - RaiBlocks 区块链 (Nano) 本地客户端 (rai_node –daemon) 无法开设新帐户
- ssh - 监控远程服务器触发的本地文件执行/访问历史
- python - 从 google.cloud.logging_v2 导入类型 ImportError:无法导入名称类型
- scala - 当我没有明确指定类型时,为什么 TypeTag of T Nothing?
- graphql - 如何让 Apollo Server 中的 Schema Stitching 更快?
- ios - 未找到搜索结果时添加带有标签的背景视图
- apache-spark - Java中的DseGraphFrame是否支持导出图形?