How to make background dark, when v-dialog opens in vue js-CodePudding

Here is my sample code I have added a v-dialog ftom vuetify. I want the background to be dark/black or blur when the v-dialog opens

<v-dialog v-model="logoutdialog" width="500" >
     <v-card>
     <v-card-title>
     <span>Logout</span>
     <v-spacer></v-spacer>
     <v-menu bottom left>
     <template v-slot:activator="{ on, attrs }">
     <v-btn
     icon
     v-bind="attrs"
     v-on="on"
     @click="logoutdialog= false">
     <v-icon>mdi-close</v-icon>
     </v-btn>
     </template>
     </v-menu>
     </v-card-title>
     <v-card-actions>
     <v-btn
     color="primary" text @click="logoutdialog = false">
     Close
     </v-btn>
     </v-card-actions>
     </v-card>
         [![expected output][1]][1]
</v-dialog>

The below attached is the sample code [1]: https://i.stack.imgur.com/oXD3f.jpg

CodePudding user response：

Here's something that works for me in vue2

<style>
/* hide the "scrim", it's pointless */
.v-overlay--active .v-overlay__scrim {
    display: none;
}
/* style the overlay container as required */
.v-overlay--active {
    backdrop-filter: blur(2px);
    background: rgb(0 0 0 / 0.8);
}
/* if you have an auto dark theme
   for prefers-color-scheme: dark
   I find the 0.8 too dark
*/
@media (prefers-color-scheme: dark) {
    .v-overlay--active {
        background: rgb(0 0 0 / 0.4);
    }
}
</style>

CodePudding user response：

You can do this by defining overlay-color and overlay-opacity props for v-dialog component.

API documentation: https://vuetifyjs.com/en/api/v-dialog/#props-overlay-color

Example: https://codesandbox.io/s/vuetify-playground-forked-t9zhps?file=/src/layout.vue:0-1695

<v-dialog
  v-model="logoutdialog"
  width="500"
  overlay-color="black"
  overlay-opacity="1"
>
// rest of the code
</v-dialog>