【发布时间】：2016-05-21 00:06:22
【问题描述】：
好的，这是我对 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: 利亚·戈切尔
<!-- 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%;
}
这段代码和我在这里找到的很接近：How to enlarge a clicked image with plain JavaScript on a mobile device
弹出窗口正在运行 - 我的问题是，当我调用任何一个弹出窗口时，所有弹出图像都会出现。第一个弹出窗口 (img01) 阻止了其余的弹出窗口，因此它们无法被看到。我认为这是因为它们都包含在具有相同“largeImgPanel”ID 的 div 中 - 但如果它们不包含在“largeImgPanel”div 中，那么当我运行该函数时它们根本不会出现。如何更改脚本以使该功能仅适用于与单击的图像相对应的特定弹出图像？
这是我的第一篇文章，如果是荒谬的，我很抱歉！任何帮助深表感谢。如果我可以尝试澄清，请告诉我。
【问题讨论】：
-
showLargeImagePanel 函数中有什么？知道了。那是你的问题
-
嗨，你看到页面了吗？ rachelgallen.com/leahgotchel.html?
-
我确实做了另一页减去已弃用的表格，但我的 Dreamweaver 崩溃了！我出去吃午饭，电脑重启了，所以我稍后会发布重新编辑
-
实际上你的其他编辑在rachelgallen.com/leahgotchel1.html
-
我一定会的！不，直到现在我才知道“查看源代码”，但我喜欢它！将研究您提到的其他事情...至于差距，我不确定为什么会出现在您的示例中...在我这边，图像始终位于左侧。也许我发布的css有差异？不过，这是一个很酷的设计；）
标签： javascript popup modal-dialog