Javascript 如何使用HTML中的弹出式机制打开未知数量的图像
在创建网站方面，我是一个初学者，我有一个大问题。Javascript 如何使用HTML中的弹出式机制打开未知数量的图像,javascript,php,html,css,Javascript,Php,Html,Css,在创建网站方面，我是一个初学者，我有一个大问题。 我已经创建了一个超级基本的网站，一个人可以登录和上传图片。用户或来宾可以使用过滤器搜索所有图像。 我想实现的是，当一个人使用过滤器查看图像后，我希望他能够单击任何图像，并在弹出式窗口中以全比例向他显示图像。 我已经尝试了W3中的模式图像代码，但它只适用于显示的第一个图像。 所有图像都存储在sql表中。 这是目前只显示图像的网页 <html> <head> <title>Search photo</
我已经创建了一个超级基本的网站，一个人可以登录和上传图片。用户或来宾可以使用过滤器搜索所有图像。
我想实现的是，当一个人使用过滤器查看图像后，我希望他能够单击任何图像，并在弹出式窗口中以全比例向他显示图像。
我已经尝试了W3中的模式图像代码，但它只适用于显示的第一个图像。 所有图像都存储在sql表中。
这是目前只显示图像的网页
<html>
<head>
<title>Search photo</title>
</head>
<body>
<?php
session_start();
if($_SESSION['username']!=NULL){
echo "Welcome ". $_SESSION['username'];
}
?>
<br>
<table>
<tr>
<td><a href="home.php">Home</a></td>
<td><a href="addphoto.php">Add new photo</a></td>
<td><a href="searchphoto.php">Search photo</a></td>
<td><a href="top5.php">Top 5</a></td>
<td><a href="contact.php">Contact us</a></td>
<?php
if($_SESSION['username']!=NULL){
echo "<td><a href='logout_p.php'>Logout</a></td>";
}else{
echo "<td><a href='registration.php'>Register</a></td>";
}
?>
</tr>
</table>
<br>
<form method="post" action="searchphoto.php">
Select image filter:
<select name="s_filter" required>
<option selected value="all">All
<option value="face">Faces
<option value="place">Places
<option value="car">Cars
<option value="other">Other
<option value="bestvote">Best average vote
<option value="worstvote">Worst average vote
<option value="text">Text
</select>
<input type="submit" name="search_submit" value="Search">
<br>
Fill this parameter if you chose Text: <input type="text" name="filter_text">
<br>
</form>
<?php
if(isset($_POST['search_submit'])){
$con = mysqli_connect("localhost","root","","site");
if(mysqli_connect_errno()){
echo "Fatal error";
die;
}
$filter = $_POST['s_filter'];
$query = mysqli_query($con, "SELECT * FROM images");
if($filter == "all"){
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "face"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "car"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "place"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "other"){
$query = mysqli_query($con, "SELECT * FROM images WHERE category='$filter'");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "bestvote"){
$query = mysqli_query($con, "SELECT * FROM images ORDER BY avg_vote DESC");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "worstvote"){
$query = mysqli_query($con, "SELECT * FROM images ORDER BY avg_vote");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}else if($filter == "text"){
$filter = $_POST['filter_text'];
$query = mysqli_query($con, "SELECT * FROM images WHERE INSTR(description, '{$filter}')");
while($row = mysqli_fetch_array($query)){
$image = $row['img'];
$image_src = "".$image;
?>
<div style="float: left;">
<img id='myImg' src='<?php echo "".$image_src;?>' alt='Not found' height="300" width="300">
</div>
<div style="float: leftt">
<table border="5" width="300" height="300">
<tr>
<td>Name: <?php echo "".$image;?></td>
</tr>
<tr>
<td>Uploader: <?php echo "".$row['up_username'];?></td>
</tr>
<tr>
<td>Category: <?php echo "".$row['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo "".$row['description'];?></td>
</tr>
<tr>
<td>Average score: <?php echo "".$row['avg_vote'];?>/5</td>
<tr>
<td>Votes: <?php echo "".$row['num_votes'];?></td>
</tr>
</table>
</div>
<br>
<?php
if($_SESSION['username']!=NULL){
?>
<form method='post' action='vote_p.php'>
Give your vote:
<select name='usr_vote'>
<option selected value='5'>5
<option value='4'>4
<option value='3'>3
<option value='2'>2
<option value='1'>1";
</select>
<input type='hidden' name='vote_name' value='<?php echo "".$image;?>'>
<input type='submit' name='vote_button' value='vote'>
</form><br>
<?php
}else{
echo "<br>";
}
}
}
mysqli_close($con);
}
?>
</body>
搜索照片
选择图像过滤器：
全部的
面孔
地点
汽车
另外
最佳平均投票
最差平均投票数
文本
如果选择“文本”，请填写此参数：
“alt='notfound'height=“300”width=“300”>
姓名：
上载程序：
类别：
说明：
平均分：/5
投票：
请投票：
5.
4.
3.
2.
1";
我已经在w3schools的图像模式中做了一些更改，这里是代码，希望您可以相应地进行更改
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px" onclick="callfunction(this)">
<img class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px" onclick="callfunction(this)">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
//var img = document.getElementById('myImg');
function callfunction(e){
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
modal.style.display = "block";
modalImg.src = e.src;
captionText.innerHTML = e.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
正文{字体系列：Arial，Helvetica，无衬线；}
myImg先生{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
.myImg:hover{opacity:0.7；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*模态图像字幕*/
#标题{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
文本对齐：居中；
颜色：#ccc；
填充：10px0；
高度：150像素；
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
/*较小屏幕上的100%图像宽度*/
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}
图像模态
在本例中，我们使用CSS创建默认隐藏的模式（对话框）
我们使用JavaScript触发模式，并在点击模式时在模式内显示当前图像。还请注意，我们使用图像的“alt”属性值作为模式内的图像标题文本
&时代；
关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}
将图像放入
？但这不会在新网页中打开图像吗？我实际上想保持在同一页，就像在facebook中打开图像一样。您可以制作
标记，不打开新窗口/浏览器选项卡，并添加一些js，将图像放入某种警报窗口。您能帮我编写代码吗给我一个链接，我真的可以看到如何做到这一点吗？