The backdrop color is the color that cover the entire page when you open a modal.
In the settings we can only choose a color:
Click on the icon below to open a modal with the default style:
Default Modal backdrop style
This is just an awesome modal!
Now with a little bit of magic, we can customize that background.
If you only have one modal in your page, you can simply use that class .oxy-modal-backdrop to style it.
.oxy-modal-backdrop {
background-image: linear-gradient(0deg, rgba(255,255,255,0) 25%, #000000 25%, #000000 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 75%, #000000 75%, #000000 100%);
background-size: 8.00px 8.00px;
}Horizontal lines
This is just an awesome modal!
If you have several modals in the same page (just like this current page), and you want to have different backdrop styles for each of them, you will have to add a data attribute, just like this example:
.oxy-modal-backdrop[data-trigger-selector="#fancy_icon-40-635"] {
background-image: linear-gradient(135deg, rgba(255,255,255,0) 25%, #000000 25%, #000000 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 75%, #000000 75%, #000000 100%);
background-size: 11.31px 11.31px;
}Some nice stripes
This is just an awesome modal!
Here are some cool websites where you can generate some gradient or SVG backgrounds:
from svgbackgrounds.com
This is just an awesome modal!
More cutomized backdrop styles in action are also available in my Design Set:
