Question

我在点击图片时尝试弹出一个节目。我能找到的就是如何放大图像。以下是我的代码，但它不起作用。我不确定哪个部分出错了......我可以在span标签中找到一张桌子吗？

.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

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

Answer 2

您可以在点击后在图像后插入一些文字;

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

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

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

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

检查这个。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何将图像转换为仅包含文本的弹出窗口

3 个答案: