弹出模式时如何使组件变暗（Tailwind Flowbite）？

Question

我想问一下。 我有一个布局，点击按钮时有一个按钮，会出现一个弹窗，问题是当modal出现时，有一些组件没有变暗，如图所示的按钮和导航栏，我使用 vue cli 和 tailwind，对于模态我使用 flowbite。 我一直在寻找一种方法，但仍然找不到。 谁能帮我？

我的网站目前有一个基于移动设备的显示这个 web 没有模态

这是单击按钮时的 web

这是 navbarWhite.vue 中的代码

<template>
  <header class="sticky h-14 top-0 z-50 bg-white" :class="boxShadow">
    <div class="flex flex-row">
      <div class="absolute" v-if="srcPictureLeft">
        <img
          @click="onClickBack"
          class="ml-7 py-4 cursor-pointer text-black"
          :src="require(`../assets/icon/${srcPictureLeft}`)"
        />
      </div>
      <div v-else></div>
      <div class="py-4 relative mx-auto font-semibold text-black text-xl">
        {{ title }}
      </div>
    </div>
  </header>
</template>
<style>
</style>
<script>
export default {
  name: "NavbarWhite",
  props: {
    onClickBack: {
      type: Function,
    },
    title: String,
    srcPictureLeft: String,
    boxShadow: String,
  },
};
</script>

这是按钮组件（ButtonBottom.vue）

<template>
  <div
    class="
      sticky
      w-full
      absolute
      mb-0
      bottom-0
      z-50
      bg-white
      h-16
      drop-shadow-[0_0_4px_rgba(0,0,0,0.25)]
    "
  >
    <div class="mx-[30px] py-2">
      <button-primary
        class="
          bg-green-button
          text-white
          hover:bg-green-button-darker hover:rounded-[32px]
        "
      >
        <slot>Button</slot>
      </button-primary>
    </div>
  </div>
</template>
<script>
import ButtonPrimary from "@/components/ButtonPrimary.vue";
export default {
  name: "ButtonBottom",
  components: {
    ButtonPrimary,
  },
};
</script>

这是所有组件调用的父级

<template>
  <div class="h-screen relative">
    <div class="h-[94%]">
      <navbar-white
        boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
        srcPictureLeft="backIconBlack.svg"
        :onClickBack="goBack"
        title="Ringkasan Transaksi"
      />
      <div class="mt-10 mx-[30px]">
        <div class="flex flex-row justify-between mb-7">
          <div class="font-semibold">No. Rekening</div>
          <div>12345678</div>
        </div>

        <div class="flex flex-row justify-between mb-7">
          <div class="font-semibold">Nama Penerima</div>
          <div>Lorem Ipsum</div>
        </div>

        <div class="flex flex-row justify-between mb-4">
          <div class="font-semibold">Bank Tujuan</div>
          <div>12345678</div>
        </div>

        <hr class="mb-4" />

        <div class="flex flex-row justify-between mb-7">
          <div class="font-semibold">Nominal</div>
          <div>Rp 200.000</div>
        </div>

        <div class="flex flex-row justify-between mb-4">
          <div class="font-semibold">Fee</div>
          <div>Rp 2.500</div>
        </div>

        <div class="flex flex-row justify-between">
          <div class="font-semibold">Total</div>
          <div class="font-semibold">Rp 202.500</div>
        </div>
      </div>
    </div>
    <button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
    <!-- modal start here -->
    <div
      id="biayaAdmin"
      tabindex="-1"
      class="
        hidden
        overflow-y-auto overflow-x-hidden
        fixed
        top-0
        right-0
        left-0
        z-50
        w-full
        md:inset-0
        h-modal
        md:h-full
      "
    >
      <div class="relative p-4 w-full max-w-md h-full md:h-auto">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
          <!-- Modal header -->
          <div
            class="
              flex
              justify-between
              items-center
              p-5
              rounded-t
              border-b
              dark:border-gray-600
            "
          >
            <h3 class="text-xl font-medium text-gray-900 dark:text-white">
              Small modal
            </h3>
            <button
              type="button"
              class="
                text-gray-400
                bg-transparent
                hover:bg-gray-200 hover:text-gray-900
                rounded-lg
                text-sm
                p-1.5
                ml-auto
                inline-flex
                items-center
                dark:hover:bg-gray-600 dark:hover:text-white
              "
              data-modal-toggle="biayaAdmin"
            >
              <svg
                aria-hidden="true"
                class="w-5 h-5"
                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 class="sr-only">Close modal</span>
            </button>
          </div>
          <!-- Modal body -->
          <div class="p-6 space-y-6">
            <p
              class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
            >
              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
              class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
            >
              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
            class="
              flex
              items-center
              p-6
              space-x-2
              rounded-b
              border-t border-gray-200
              dark:border-gray-600
            "
          >
            <button
              data-modal-toggle="biayaAdmin"
              type="button"
              class="
                text-white
                bg-blue-700
                hover:bg-blue-800
                focus:ring-4 focus:outline-none focus:ring-blue-300
                font-medium
                rounded-lg
                text-sm
                px-5
                py-2.5
                text-center
                dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
              "
            >
              I accept
            </button>
            <button
              data-modal-toggle="biayaAdmin"
              type="button"
              class="
                text-gray-500
                bg-white
                hover:bg-gray-100
                focus:ring-4 focus:outline-none focus:ring-gray-200
                rounded-lg
                border border-gray-200
                text-sm
                font-medium
                px-5
                py-2.5
                hover:text-gray-900
                focus:z-10
                dark:bg-gray-700
                dark:text-gray-300
                dark:border-gray-500
                dark:hover:text-white
                dark:hover:bg-gray-600
                dark:focus:ring-gray-600
              "
            >
              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>

Answer 1

header 和页脚的 css z-index可能高于覆盖掩码的z-index 。

尝试检查元素并评估它们的z-index值，尝试强制使用新值以确保 header 和页脚的z-index值低于灰色覆盖掩码的值。

问题可能是其中一些元素缺少z-index值来指示哪些元素应该出现在另一个元素的顶部。

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