Mettre un bouton pour fermer zoom photo

.arrow::before {
  content: "X";
}	

<a href="../../image/galeria/42111a (5).jpg">
	<img src="../../image/galeria/42111a (5).jpg"><span class="arrow"></span>
	</a>
	

			function onClick(element) {
			  document.getElementById("img01").src = element.src;
			  document.getElementById("modal01").style.display = "block";
			}
			

		
		

		
		if (!empty($_POST['pais'])){
						
			if(isset($_POST))
			{
			   $categoria = $_POST["pais"];
				
				
				$imagegrande = glob('../../image/galeria/'.$categoria.'*'); // toute les photo qui commence par
				$files = glob('../../image/galeria/mini/'.$categoria.'*'); // toute les photo qui commence par
				$lines = count($files); // nombre de photo
				$nb_colonne = 3; // nombre de colonnes a l'affichage
				$nb_imgCel = ceil($lines/$nb_colonne); // Nombre d'images par cellule

				//variable utilisées pour recréer un array organisé comme tu le souhaites
				$arrF = [];
				$row = 0;
				$col = 0;
				$K = 0;

				//on boucle sur chaque fichier :
				foreach($files as $F){
				 if($col>0 && $col % ($nb_colonne-1) == 0 && $K>=$nb_imgCel){
				   $col=0;
				   $K=0;
				   $row++;   
				 }
				  if($K>0 && $K % $nb_imgCel == 0){
				   $col++;
				   $K=0;
				 }
				 
				 $arrF[$row][$col][] = $F;
				 $K++;
				}

				//pour voir à quoi ressemble l'array
				
				echo "<table width='60%'  align='center'>";
				foreach($arrF as $Row ){
				  echo "<tr>";
				   foreach($Row as $Col){
					 echo "<td width='30%' style='vertical-align: top;>";
					 foreach($Col as $img){
						 echo "<div class='container1'><img class='catimage' src='$img' style=' cursor:pointer' onclick='onClick(this)' class='modal-hover-opacity'/><br></div>";
						 
		?>
			<div id="modal01" class="modal" onclick="this.style.display='none'">
				<span class="close">X</span>
					<div class="modal-content">
						<img id="img01" style="max-width:70%">
					</div>
			</div>
			<script>
			function onClick(element) {
			  document.getElementById("img01").src = element.src;
			  document.getElementById("modal01").style.display = "block";
			}
			</script>
		<?php


					  }
					   echo "</td>";
				   }
				  echo "</tr>";
				}
					
			}  
		}
		

<?php

if (!empty($_POST['pais'])) {
    if (isset($_POST)) {
        $categoria = $_POST["pais"];

        $imagegrande = glob('../../image/galeria/' . $categoria . '*'); // toute les photo qui commence par
        $files = glob('../../image/galeria/mini/' . $categoria . '*'); // toute les photo qui commence par
        $lines = count($files); // nombre de photo
        $nb_colonne = 3; // nombre de colonnes a l'affichage
        $nb_imgCel = ceil($lines / $nb_colonne); // Nombre d'images par cellule

        //variable utilisées pour recréer un array organisé comme tu le souhaites
        $arrF = [];
        $row = 0;
        $col = 0;
        $K = 0;

        //on boucle sur chaque fichier :
        foreach ($files as $F) {
            if ($col > 0 && $col % ($nb_colonne - 1) == 0 && $K >= $nb_imgCel) {
                $col = 0;
                $K = 0;
                $row++;
            }
            if ($K > 0 && $K % $nb_imgCel == 0) {
                $col++;
                $K = 0;
            }

            $arrF[$row][$col][] = $F;
            $K++;
        }


        echo "<table width='60%'  align='center'>";
        foreach ($arrF as $Row) {
            echo "<tr>";
            foreach ($Row as $Col) {
                echo "<td width='30%' style='vertical-align: top;>";
                foreach ($Col as $img) {
                    echo "<div class='container1'><img class='catimage' src='$img' style=' cursor:pointer' onclick='showImageInModal(this)' class='modal-hover-opacity'/><br></div>";
                }
                echo "</td>";
            }
            echo "</tr>";
        }
        ?>
        <div id="modal01" class="modal" onclick="this.style.display='none'">
            <span class="close">X</span>
            <div class="modal-content">
                <img id="img01" style="max-width:70%">
            </div>
        </div>
        <script>
            function showImageInModal(element) {
                document.getElementById("img01").src = element.src;
                document.getElementById("modal01").style.display = "block";
            }
        </script>
        <?php
    }
}