jquery - 如何将图像变成只有文本的弹出窗口

Question

单击图像时，我正在尝试弹出显示。我能找到的只是如何放大图像。以下是我拥有的代码，但它不起作用。我不确定哪一部分是错的......我可以在跨度标签中有一个表格吗？

.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>

Answer 1

检查这个。

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

.popup {
  margin-top:10%;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup .popuptext {
    visibility: hidden;
    width: 250px;
    background-color: red;
    color: #fff;
    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;
}

/* 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()"><img src="http://abravmsd.com/images/ab_fb.png" width="30" height="30">
  <span class="popuptext" id="myPopup">This is a popup text</span>
</div>

Answer 2

点击后可以在图片后面插入一些文字；

  $('<span class="absolute">Test</span>').insertAfter(this);

并将其包装在与图像相同高度和宽度的 div 中，position: relative; 然后将其绝对定位在图像上方。

.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%)
}

这是一个例子：

$('.click-text').click(function() {
  if (!$(this).next('span.absolute').length) {
    $('<span class="absolute">Test</span>').insertAfter(this);
  } else {
    $(this).next('span.absolute').remove();
  }
});

.img-container {
  height: 100px;
  width: 100px;
  position: relative;
}
.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="img-container">
  <img src="http://via.placeholder.com/100x100" class="click-text">
</div>

Answer 3

您可以通过以下方式执行此操作：http ://www.jacklmoore.com/colorbox/ 请参阅演示：http ://www.jacklmoore.com/colorbox/example1/ 请参阅：内联 HTML