javascript - 单击图像时打开窗口，单击时关闭新窗口

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来创建您正在寻找的体验，您正在寻找的工具是模态框(也称为灯箱)，如果您熟悉的话Javascript我建议你使用Magnific Popup 。如果您不熟悉 Javascript 或 JQuery，您可以采用 CSS 方法，可以找到有关实现此目的的教程和一些示例 here 。我很想留下答案作为评论，但我仍然没有权利。