Comments (5)
Hi there!
Love the module, using it with my current project with ease. BUT! there's this .v--modal
class that still has white background and seems stubborn with overwriting attempts. Any hints? Cheers! 🍻
from vue-js-modal.
Partly figured it out:
Looks like it needs to be "classes" not ":classes" and I used this:
.modal {
background-color: #000;
text-align: left;
border-radius: 30px;
box-shadow: 0 20px 60px -2px rgba(27,33,58,.4);
padding: 0;
display: block;
}
It makes the borders round, however the background still remains white.
The problem is this code when rendered:
.v--modal-overlay .v--modal-box[data-v-40dd3b1e] {
position: relative;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
Removing the background-color in developer tools it makes it black. But I can't override it.
from vue-js-modal.
Consider removing this line from the project source:
https://github.com/euvl/vue-js-modal/blob/master/src/Modal.vue#L392
It seems to have no effect on the white rendering, and I can override the background color.
If I have no specified class I will get a white modal (did not test in all browsers)
from vue-js-modal.
Hi @Zyles
Actually you were right, tiny change.
Please check out version [email protected]
. It should not have white background.
Let me know if the issue is fixed.
Cheers 👍
from vue-js-modal.
After banging my head around for hours I finally figured out how to overwrite the .vm--modal
CSS.
It's actually VERY simple. Just add !important
to the CSS (make sure the .modal-override
class is global and not scoped)
<modal name="foo" classes="modal-override">...</modal>
.modal-override
background #0008 !important
border-radius 20px !important
padding 10px
from vue-js-modal.
Related Issues (20)
- delete vm--overlay background opacity
- Disabling the escape key handler HOT 3
- The function of closing the modal window on Esc has no reactivity HOT 1
- vue3 support HOT 1
- Cannot read properties of undefined (reading '$modal') HOT 5
- Modal is not scrollable when adaptive is true HOT 1
- How to set border-radius HOT 1
- Problem with styles in component inside modal call
- vee-validate validation not working once wrapped with vue-js-modal
- Unable to preventDefault inside passive event listener due to target being treated as passive HOT 1
- Got "Incorrect or missing password" when installing this package HOT 1
- text-align on v-modal causes problems in RTL languages
- Can add the close button dynamically?
- Incorrect documentation on Events section
- TypeError: Cannot read properties of undefined (reading 'show') HOT 2
- Clunky behaviour on reloading pages with SSR nuxt HOT 1
- Preventing multiple modals opening at the same time HOT 2
- TypeError: undefined is not an object (evaluating 'e.prototype.$modal')
- Create for version three
- vue-js-modal supporting vue js 3latest version HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-js-modal.