[Vuejs]-Displaying a non-transparent auto closing overlay with Vuetify

by

0👍

✅

Query 1- Apply opacity 1 to the class selector .v-overlay__scrim.

Query 2- closeOnContentClick is applicable only on the content not on the screen. If you will click on content, the overlay will not close but if you will click anywhere else on the screen, it will close. For your use-case, you should use the persistent prop, it will keep the overlay open unless you close it manually.

Query 3- Use settimeout to close the overlay after x seconds like this example.

Here is a working demo-

const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data: () => ({
    overlay: false,
  }),
  watch: {
    overlay (val) {
      val && setTimeout(() => {
        this.overlay = false
      }, 5000)
    },
  },
}).use(vuetify).mount('#app')
.v-overlay__scrim {
 opacity: 1 !important;
 background: white !important;
}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.css">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-btn @click="overlay = !overlay">Show Overlay</v-btn>
    <v-overlay v-model="overlay" persistent>
      <span>This overlay will not close on click but auto close after 5 seconds.</span>
    </v-overlay>
  </v-app>
</div>

Leave a comment