Javascript排序的图像弹出窗口..可以't单独弹出

Javascript ordered image popup ... can't separate individual popups

本文关键字：单独弹 可以 窗口 排序 图像 Javascript      更新时间：2023-09-26

好吧，这是我第一次尝试javascript或一般编码，所以我希望这不会太混乱。我的代码几乎在我想要的地方，但我遇到了最后一个问题——

我有一个滚动的图像表，我希望观众能够点击每一张图片来单独放大。我正试图通过showImage功能做到这一点，如下所示：

JS:

function showImage(largeimg01) {
document.getElementById("largeimg01").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showImage(largeimg02) {
document.getElementById("largeimg02").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showImage(largeimg03) {
document.getElementById("largeimg03").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}

HTML:Leah Gotchel

<!-- javascript here -->
<link href="../wood-site-pagespopup.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="../index.html">
<p id="back"> LEAH GOTCHEL </p></a>
<!-- hidden popup images -->
<div id="largeImgPanel"  onclick="hideMe(this);">
<img class="popup" id="largeimg01" src="../images/GUS_4735retweb.jpg"       />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg02" src="../images/GUS_5034retweb.jpg" />
</div>

<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg03" src="../images/GUS_4735retweb.jpg"  />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg04" src="../images/GUS_4735retweb.jpg" />
</div>

<table>
<tr>
<td><img src="../images/GUS_4735retweb.jpg" id="img01"    style="cursor:pointer" 
onclick="showImage(largeimg01);"></td>
<td> 
<img src="../images/GUS_5034retweb.jpg" id="img02" style="cursor:pointer" 
onclick="showImage(largeimg02);">       
</td>
<td><img src="../images/GUS_5060retweb.jpg" id="img03" style="cursor:pointer" 
onclick="showImage(largeimg03);">
</td>
<td><img src='../images/GUS_5077retweb.jpg'" id="img04" style="cursor:pointer" 
onclick="showImage(largeimg04);">
</td>
</tr>
</table>
<p id="caption">custom window bench: oak, poplar </p>


</body>
</html>

CSS：

html, body {
height:100%;
width:100%;
margin:0;}
html {
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
#back{
font-family: Corbert;
font-style: italic; 
font-size: 2em; 
color: ##006699;
position: relative; 
padding: 30px; 
margin-left: 20px; 
}

img {
padding: 20px;
width: 500px; 
}
a {
color: #006699;
margin: 0 auto;
text-decoration: none; 
}
a:hover {
color: #8b98a7;
}

p {
position: fixed;
padding: 30px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
clear: both; 
margin-left: 20px; 
}

table {
top: 50%
left: 50% 
position: absolute; 
border:none;
}

.popup {
position: relative;
height: 90%;
width: auto;   
overflow: scroll;
}

.largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; bottom: 0; 
width:100%;
height:100%; 
background-color: rgba(100,100,100, 0.5);
}
#largeImg  {
height: auto;
max-width: 100%;
}

这段代码与我在这里发现的很接近：如何在移动设备上用简单的JavaScript放大点击的图像

弹出窗口正在运行-我的问题是，当我调用任何一个弹出窗口时，所有弹出的图像都会出现。第一个弹出窗口（img01）正在阻塞其余的窗口，因此无法看到它们。我认为这是因为它们都包含在具有相同"largeImgPanel"id的div中，但如果它们不包含在"largeImgPanel"div中，那么当我运行函数时，它们就根本不会出现。如何更改脚本，使该功能仅适用于与正在单击的图像相对应的特定弹出图像？

这是我的第一个帖子，所以如果它是荒谬的，我道歉！非常感谢您的帮助。请让我知道我是否可以尝试澄清。

所有4个图像都使用相同的id largeImgPanel命名，因此当调用该函数时，所有4个都会显示。将id更改为类（在css中放一个点而不是#），并为div提供唯一的id，使类保持

这应该会帮你解决问题，但记得打电话给相关的id！

编辑：

好的，这是你的工作（编辑！）代码

function showImage(imgname){
var mypic=document.getElementById(imgname);
mypic.style.visibility = 'visible';
mypic.style.zIndex = '20';
unselectAll();
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
obj.style.zIndex = '-50';
}

html, body {
height:100%;
width:100%;
margin:0;}
html {
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
#back{
font-family: Corbert;
font-style: italic; 
font-size: 2em; 
color: ##006699;
position: relative; 
padding: 30px; 
margin-left: 20px; 
}
td img {
padding: 20px;
width: 500px; 
}
a {
color: #006699;
margin: 0 auto;
text-decoration: none; 
}
a:hover {
color: #8b98a7;
}
p {
position: fixed;
padding: 30px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
clear: both; 
margin-left: 20px; 
}
table {
top: 50%
left: 50% 
position: absolute; 
border:none;
}
.popup {
position: fixed;
text-align: center;
z-index: 0;  
overflow-y: scroll;
top: 5px; left: 5px;
background-color: rgba(100,100,100, 0.5);
background-size:100% 100%;
}
#popup1, #popup2, #popup3, #popup4 {
visibility: hidden;
width:800px!important;
padding:25px;
height:auto; 
margin:auto;
}

<!doctype html>
<html>
<body>
<a href="../index.html">
<p id="back"> LEAH GOTCHEL </p></a>
<!-- hidden popup images -->
<img class="popup" id="popup1" src="http://www.rachelgallen.com/images/daisies.jpg" alt="daisies" onclick="hideMe(this);"    />
<img class="popup" id="popup2" src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="snowdrops" onclick="hideMe(this);"/>
<img class="popup" id="popup3" src="http://www.rachelgallen.com/images/mountains.jpg" alt="mountains" onclick="hideMe(this);"/>
<img class="popup" id="popup4" src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="yellowflowers" onclick="hideMe(this);"/>
<table>
<tr>
<td><img src="http://www.rachelgallen.com/images/daisies.jpg" alt="daisies" id="img01" style="cursor:pointer" 
onclick="showImage('popup1');"></td>
<td> 
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="snowdrops" id="img02" style="cursor:pointer" 
onclick="showImage('popup2');">       
</td>
<td><img src="http://www.rachelgallen.com/images/mountains.jpg" alt="mountains" id="img03" style="cursor:pointer" 
onclick="showImage('popup3');"></td>
<td><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="yellowflowers" id="img04" style="cursor:pointer" 
onclick="showImage('popup4');">
</td>
</tr>
</table>
<p id="caption">custom window bench: oak, poplar </p>
</body>
</html>

您会注意到，您的javascript被巧妙地浓缩为三个函数，并且您的id现在是唯一的。我去掉了多余的div，既然你可以点击图片隐藏它，为什么你还需要它们？过于复杂的事情。很明显，这些图片已经被我网站上的假图片取代了，但它确实有效！

相关文章：