Question

我使用此代码来显示从数据库中检索到的图像。 $ path包含图像的路径，$ res_path包含同一图像的较小版本的路径。我要做的是当用户点击图像时，将出现一个新窗口（不是新标签），其中只包含$ path中存在的图像。然后，当用户点击该新弹出窗口中存在的图像时，我希望该窗口关闭。任何提示都会有所帮助。代码：

<?php
                //unset($_SESSION['search']);
                if( isset($_SESSION['search']) )
                {
                    //unset($_SESSION['search']);
                    $rows = $_SESSION['search_rows'];
                    $photoArray = $_SESSION['search'];
                }
                else
                {
                    $rows = $_SESSION['rows'];
                    $photoArray = $_SESSION['array'];
                }
                //display all photos in database
                //$rows = $_SESSION['rows'];
                for ($x = 0; $x < $rows; $x++) {
                    $name = $photoArray[$x][1];
                    $username = $photoArray[$x][8];
                    $category = $photoArray[$x][9];
                    $description = $photoArray[$x][2];
                    $likes = $photoArray[$x][7];
                    $path = $photoArray[$x][3];
                    $res_path = $photoArray[$x][4];
             ?>
             <center><table style="width:80%" height = "320" align="center">
                <tr>
                    <th rowspan="6" width="50%"><img onclick="myFunction('<?php echo $path ?>')" src="<?php echo $res_path ?>" alt=""></img></th>
                    <td>Name: <?php echo $name; ?></td>
                </tr>
                <tr><td>User: <?php echo $username; ?></td></tr>
                <tr><td>Category: <?php echo $category; ?></td></tr>
                <tr><td>Description: <?php echo $description; ?></td></tr>
                <tr><td>path: <?php echo $path; ?></td></tr>
                <tr><td>Likes: <?php echo $likes; ?></td></tr>
            </table></center>
             <?php 
             unset($_SESSION['search']);
             unset($_SESSION['search_rows']);
             } 
             ?>

这是我创建新窗口的javascript文件。我认为通过使用window.write（）我可以写一个javascript函数，关闭点击新窗口，但我做错了。 JS：

function myFunction(data) {
    img = new Image();
    img.src = data;
    window.open(data, '_blank', 'toolbar=0,location=0,menubar=0, width = '+ img.width +', height=' + img.height);
    //window.write(<script type="text/javascript"> $(document).click(function(e) { if (e.button == 0) {window.close(); }}); </script>);
}

Answer 1

如@Rikudou_Sennin所述，您可以使用一些Javascript来创建您正在寻找的体验，您正在寻找的工具是Modal（也称为灯箱），如果您熟悉Javascript我建议您使用Magnific Popup。如果您不熟悉Javascript或JQuery，可以采用CSS方法，教程以及实现此目的的一些示例here。我本来希望留下答案作为评论，但我仍然不能做到这一点。

单击图像上的打开窗口，单击时关闭新窗口

1 个答案: