在我单击图像之前会出现模式关闭按钮

Question

我希望模态关闭按钮仅在单击图像图标时出现，而模态显示。 现在，在我单击图像/图像图标之前，激活模式之前，模式关闭按钮位于网站上。 现在，它一直在屏幕上徘徊，我把它放在模式div中。 有问题的主要部分是带有svg图标的food_modal_close div。

    <section class="our_work">

        <h2 class="food_title">Our Food</h2>
    <div class="picture_grid">
    <article class="food_picture pic_1">
      <img src="img/food_1.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="1">
        <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_2">
      <img src="img/food_2.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="2">
          <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_3">
      <img src="img/food_3.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="3">
          <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_4">
      <img src="img/food_4.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="4">
          <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_5">
      <img src="img/food_5.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="5">
          <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_6">
      <img src="img/food_6.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="6">
          <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_7">
      <img src="img/food_7.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="7">
          <i class="fas fa-search"></i>
      </a>
    </article>

    <article class="food_picture pic_8">
      <img src="img/food_8.jpg" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="8">
          <i class="fas fa-search"></i>
      </a>
    </article>
    </div>

     <!-- modal -->
     <div class="food_modal">
      <div class="food_modal_item"></div>
      <div class="food_modal_close">
        <i class="fas fa-window-close"></i>
      </div>
    </div>
    </section>

/* food grid */



    .picture_grid{
        max-width: 75vw;
        margin:2rem auto;
        overflow: hidden;
    }

    .food_title{
        max-width: 75vw;
        font-size: 3rem;
        text-transform: capitalize;
        margin-top: 5rem;
        padding: 3rem;
    }

    .food_title:after{
        content: "";
        display: block;
        margin-top: 1rem;
        background: #F4D06F;
        width: 15rem;
        height: 0.25rem;;
    }


    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }


    .food_picture:hover .food_picture_img{
        opacity: .5;
        transform: scale(1.2);
    transition: all 1s linear;
    }

    .food_picture{
        overflow: hidden;
        position: relative;
    }

    .food_picture:after {
      content: "";
      background: linear-gradient(#333);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: -1;
    }



    .food_picture_icon{
        position: absolute;
        color: var(--CRed);
        top: 50%;
        left: 50%;
        display: inline-block;
        font-size: 4rem;
        text-decoration: none;
        transition: all 3 ease;
        transform: scale(0);
    }

    .food_picture:hover .food_picture_icon{
    transform: scale(1.3) translate(-50%,-50%)
    }

    .food_picture_icon:hover{
        color: black;
    cursor: pointer;
    }


    .pic_1{
        grid-area: one;
    }

    .pic_2{
        grid-area: two;
    }
    .pic_3{
        grid-area: three;
    }

    .pic_4{

        grid-area: four;
    }

    .pic_5{

        grid-area: five;
    }

    .pic_6{

        grid-area: six;
    }

    .pic_7{

        grid-area: seven;
    }

    .pic_8{
        grid-area: eight;
    }

    @media screen and (min-width:576px){
        .picture_grid{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 1rem;
        }
      }


      @media screen and (min-width:768px) {

        .picture_grid {
          max-width: 80%;
          margin:auto;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 500px 500px 500px 500px;
            grid-template-areas: "six six six seven"
                                "eight eight four seven"
                                "three three three two"
                                "one one five two";
                                grid-column-gap: 1rem;
        }

    }

      /* modal */

      .food-modal{
          display: none;
      }

      .food_modal_show{
          position: fixed;
          background: rgba(0,0,0,0.5);
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          z-index: 999;
          display: grid;
          justify-content: center;
          align-items: center;
      }

      .food_modal_item{
          background: url('../img/pic_1.jpg')center/cover;
        height: 70vh;
        widows: 80vw;
        border: 0.5rem solid (var(--CRed));
        border-radius: 0.4rem;
        }

        @media screen and (min-width:768px){
            .food_modal_item{
                height: 80vh;
                width: 60vw;
            }
        }

        .food_modal_close{
            position: fixed;
            font-size: 3rem;
            color: var(--CRed);
            bottom: 5%;
            right: 5%;
            transition: color 0.5s linear;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }

        .food_modal_close:hover{
            color: black;
        }

    // display modal

    const links = document.querySelectorAll('.food_picture_icon');

    links.forEach(function(item){
    item.addEventListener('click', function(event){
        ui.showModal(event)
    })
    })

    // hide modal

    document.querySelector('.food_modal_close').addEventListener('click',function(){
        ui.closeModal()
    })

    }
    ```

// show modal

UI.prototype.showModal = function(event){
    event.preventDefault();
if(event.target.parentElement.classList.contains('food_picture_icon')){
let id = event.target.parentElement.dataset.id

const modal = document.querySelector('.food_modal');
const modalItem = document.querySelector('.food_modal_item');

modal.classList.add('food_modal_show');
 modalItem.style.backgroundImage = `url(img/food_${id}.jpg`

}
}

// hide modal

UI.prototype.closeModal = function(){
    document.querySelector('.food_modal').classList.remove('food_modal_show');
}