单击图像时,我正在尝试弹出显示。我能找到的只是如何放大图像。以下是我拥有的代码,但它不起作用。我不确定哪一部分是错的......我可以在跨度标签中有一个表格吗?
.popup {
margin-top: 10%;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 250px;
background-color: #5FACD7;
color: #000000;
text-align: center;
border-radius: 6px;
Padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
@-websit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
<div class="popup" onclick="popup1()">
<img src="../media/hours.jpg" alt="Hours of Operation" width="300"
height="200"/>
<span class="popuptext" id="myPopup">
<table>
<tr>
<th>Day</th>
<th>Times</th>
</tr>
<tr>
<td> Monday - Wednesday</td>
<td> Thursday</td>
<td>Friday</td>
<td>Saturday/Sunday</td>
</tr>
<tr>
<td>9:00 a.m. - 6:00 p.m.</td>
<td>9:00 a.m. - 9:00 p.m.</td>
<td>9:00 a.m. - 8:00 p.m.</td>
<td>10:00 a.m. - 6:00 p.m.</td>
</tr>
</table>
</span>
</div>
<div class="popup" onClick="=popup2()">
<img src="../media/tickets.jpeg" alt="General Admission" width="300"
height="200"/>
<span class="popuptext" id="myPopup2">
<table>
<tr>
<th></th>
<th>Prices</th>
</tr>
<tr>
<td>Adults: </td>
<td>Children (5-12): </td>
<td>Seniors/Students with ID: </td>
<td>Adult Members: </td>
<td>Child Members: </td>
</tr>
<tr>
<td>$12.00</td>
<td>$6.00</td>
<td>$8.00</td>
<td>Free</td>
<td>Free</td>
</tr>
</table>
</span>
</div>