如何在CSS和PHP中弹出图片？
如何在CSS和PHP中弹出图片？
提问于 2017-01-18 22:13:39
我尝试用CSS和HTML在窗口中做弹出图像，并取得了成功。但是我试图用PHP从数据库的图片中弹出一张，它只弹出第一张图片，而我点击到另一张图片。
下面是CSS
<style type="text/css">
#check:checked ~ label #cover {
display: block;
}
#cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
}
#box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 400px;
height: 400px;
border: 10px solid white;
}
</style>下面是我的PHP
<? php
include("connection.php");
$que = mysql_query("select picture from pictures");
while ($row = mysql_fetch_array($que)) {
$picture = $row['picture'];
echo '<input type="checkbox" id="check" style="display:none;">
<label for="check">
<img src="/image/'.$picture.
'" style="width:50px; height: 50px"/>
</label>
<label for="check">
<div id="cover">
<div id="box">
<img src="/image/'.$picture.
'" style="width:380px; height: 380px"/>
</div>
</div>
</label>';
} ?>我怎么能弹出每一个图像，当我点击它从数据库中的许多PHP吗？
请任何人都能帮助我。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-18 22:38:52
我也很困惑。
这样的东西是你想要的吗？
var str = '<img class="image-up-popper" src=":image:" />';
for (var i = 0; i < 5; i++) {
document.body.innerHTML += str
.replace(':id:', i)
.replace(
':image:',
'https://placeholdit.imgix.net/~text?txtsize=60&txt=' + Math.round(Math.random() * 10) + '&w=100&h=100'
);
}.image-up-popper {
width: 50px;
height: 50px;
float: left;
transition: all 0.2s;
}
.image-up-popper:hover {
width: 200px;
height: 200px;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41721708
复制相关文章
相似问题
腾讯云开发者
