How to dim a component when a modal is pop out (Tailwind Flowbite)?

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 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>

and this is the button component (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>

and this is the parent where all the component called

<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>

Upvotes: 0

Answers (1)

Marc

Reputation: 5465

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

Upvotes: 0

How to dim a component when a modal is pop out (Tailwind Flowbite)?

Answers (1)

Related Questions