Currently, I am utilizing Vue 3 along with Bootstrap 5 in my project.
In my application, there is a button and two input fields. Upon clicking the button, I would like to display a "milky" overlay as shown in this example:
https://i.sstatic.net/K21k8.png
Can someone guide me on how to achieve this effect?
Here is the code that I am working with:
<template>
<div class="row">
<button class="btn btn-dark" @click="overlayMilky()">Button</button>
</div>
<div class="row mt-2">
<div class="col-12">
<span>Input 2</span>
<input class="form-control" />
</div>
<div class="col-12">
<span>Input 3</span>
<input class="form-control" />
</div>
</div>
</template>
<script>
export default {
methods: {
overlayMilky() {
// Code logic to set overlay to milky
}
}
}
</script>