Ant design modal don't mask anything

i have a major problem when i try to show some modal on my page, i want to mask all element on background with modal but i have input & button numb appear on foreground

It seems when an element no longer has a-button's class, the button is positioned in the background as i wish.

I tested this with button n°1

My page Home.vue (background) :

<template>

<div id="app">

  <div id="modal">
        <modal v-show="isModalVisible" @closeModal="showModal = false" />
  </div>
         
  <nav>         
    <input type="checkbox" id="check" />
    <label for="check" class="hamberger-btn">
        <i class="fas fa-bars"></i>
    </label>

    <ul>
        <li><a href="#">Home</a></li>
    </ul>

  </nav>
    
    <div class="input-group mb-3">
        <a-input placeholder="Search..." allow-clear/>
    </div>

 <div class="row justify-content-center">       
    <div class="d-grid-gap-2-d-md-block">
    <button class="editable-add-btn">1</button>
    <a-button class="editable-add-btn">2</a-button>
    <a-button class="editable-add-btn">3</a-button>
    <a-button class="editable-add-btn">4</a-button>
    <a-button class="editable-add-btn">5</a-button>
    <a-button class="editable-add-btn">6</a-button>
    <a-button class="editable-add-btn">7</a-button>
    <a-button class="editable-add-btn">8</a-button>
    <a-button class="editable-add-btn">9</a-button>
    </div>
 </div>


 <div v-for="element in elements" :key="element._id">
   <div class="card-view" v-on:click="select($event)" >
    <div class="container">
      <a href="#"><div class="tag_name blue">**Salary**</div></a>
      <div class="company">
        <div class="c_info">
          <a href="#" class="c_name">**Company activity**</a>
          <span class="c_industry">**Job section**</span>
          <span id="c_stars" data-star="4"></span>
          <div class="c_num">4.0</div>
        </div>
      </div>
      <div class="user">
        <div class="user_avatar">
          <img src="http://www.lccsimracing.com/communaute/ext/dark1/memberavatarstatus/image/avatar.png"/>
        </div>
        <div class="user_info">
          <a href="#" class="user_name orange">Adzuna</a> • Date<br />
        </div>
      </div>
    </div>
    </div>
   </div>
  </div>
  </div>
</template>

<script lang="js">
 import modal from "/components/modal.vue";

 export default {
 name: "Home",
 components: {
  modal,

  },
  data: () => ({
  elements: [],
  isModalVisible: false,
 }),

 methods: {
    select: function(event) {
        this.isModalVisible = true;
    }
  },
};

</script>

My Modal.vue (foreground):

<template>
 <transition name="modal-fade">
  <div class="modal-backdrop">
  
  <div class="login-box">
    <h1>My Modal</h1>
    <h2>Foreground</h2>
    <a href="#" class="social-button" id="twitter-connect"> <span>Connect with Twitter</span></a>
    </div>
  
  </div>
 </transition>
</template>

<style>
 .login-box {
 background: #fff;
 padding: 20px;
 max-width: 480px;
 margin: 25vh auto;
 text-align: center;
 letter-spacing: 1px;
  position: relative;
}

.login-box:hover {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.login-box h2 {
margin: 20px 0 20px;
padding: 0;
text-transform: uppercase;
color: #4688F1;
}

#twitter-connect {
background: rgb(255, 255, 255);
border: 1px solid rgb(85, 172, 238);
}

#twitter-connect:hover span {
  color: #FFF;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
   transition: all .3s ease;
 }

</style>