I want to ask. I have a layout, there is a button when i click the button, a pop up will appear, the problem is when the modal appears, there are some components that are not dimmed, such as the button and the navbar as shown in the picture, I use vue cli and tailwind and for the modal I use flowbite. I've been looking for a way but still can't find it. Can anyone help me?

My website currently has a mobile-based display this the web without modal

and this is the web when the button is clicked

here is the code in navbarWhite.vue

<template>
  <header  :>
    <div >
      <div  v-if="srcPictureLeft">
        <img
          @click="onClickBack"
          
          :src="require(`../assets/icon/${srcPictureLeft}`)"
        />
      </div>
      <div v-else></div>
      <div >
        {{ title }}
      </div>
    </div>
  </header>
</template>
<style>
</style>
<script>
export default {
  name: "NavbarWhite",
  props: {
    onClickBack: {
      type: Function,
    },
    title: String,
    srcPictureLeft: String,
    boxShadow: String,
  },
};
</script>

and this is the button component (ButtonBottom.vue)

<template>
  <div
    
  >
    <div >
      <button-primary
        
      >
        <slot>Button</slot>
      </button-primary>
    </div>
  </div>
</template>
<script>
import ButtonPrimary from "@/components/ButtonPrimary.vue";
export default {
  name: "ButtonBottom",
  components: {
    ButtonPrimary,
  },
};
</script>

and this is the parent where all the component called

<template>
  <div >
    <div >
      <navbar-white
        boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
        srcPictureLeft="backIconBlack.svg"
        :onClickBack="goBack"
        title="Ringkasan Transaksi"
      />
      <div >
        <div >
          <div >No. Rekening</div>
          <div>12345678</div>
        </div>

        <div >
          <div >Nama Penerima</div>
          <div>Lorem Ipsum</div>
        </div>

        <div >
          <div >Bank Tujuan</div>
          <div>12345678</div>
        </div>

        <hr  />

        <div >
          <div >Nominal</div>
          <div>Rp 200.000</div>
        </div>

        <div >
          <div >Fee</div>
          <div>Rp 2.500</div>
        </div>

        <div >
          <div >Total</div>
          <div >Rp 202.500</div>
        </div>
      </div>
    </div>
    <button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
    <!-- modal start here -->
    <div
      id="biayaAdmin"
      tabindex="-1"
      
    >
      <div >
        <!-- Modal content -->
        <div >
          <!-- Modal header -->
          <div
            
          >
            <h3 >
              Small modal
            </h3>
            <button
              type="button"
              
              data-modal-toggle="biayaAdmin"
            >
              <svg
                aria-hidden="true"
                
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                  clip-rule="evenodd"
                ></path>
              </svg>
              <span >Close modal</span>
            </button>
          </div>
          <!-- Modal body -->
          <div >
            <p
              
            >
              With less than a month to go before the European Union enacts new
              consumer privacy laws for its citizens, companies around the world
              are updating their terms of service agreements to comply.
            </p>
            <p
              
            >
              The European Union’s General Data Protection Regulation (G.D.P.R.)
              goes into effect on May 25 and is meant to ensure a common set of
              data rights in the European Union. It requires organizations to
              notify users as soon as possible of high-risk data breaches that
              could personally affect them.
            </p>
          </div>
          <!-- Modal footer -->
          <div
            
          >
            <button
              data-modal-toggle="biayaAdmin"
              type="button"
              
            >
              I accept
            </button>
            <button
              data-modal-toggle="biayaAdmin"
              type="button"
              
            >
              Decline
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ButtonBottom from "@/components/ButtonBottom.vue";
import NavbarWhite from "@/components/NavbarWhite.vue";
export default {
  name: "TransactionSummary",
  components: {
    ButtonBottom,
    NavbarWhite,
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

CodePudding user response：

The css z-index of your header and footer might be higher than the z-index of the overlay mask.

Try inspecting the elements and evaluate their z-index values, try forcing new values to ensure that the z-index of the header and footer is a lower value than the grey overlay mask.

The issue might be the lack of a z-index value on some of those elements to indicate which should appear over the top of another.

https://www.w3schools.com/cssref/pr_pos_z-index.asp