Modals
Modals are made from Popup pages. Below is a x-ray of the various CSS classes that make up a modal.

Styling the Backdrop

You can change the color of the modal backdrop with the CSS below:
1
^popuppage {
2
-rock-modal-backdrop-color: #80000000;
3
}
Copied!
The color value #80000000 will set the backdrop color to black with a 50% alpha transparence.
Below is a cheat sheet of various alpha to hex values.
  • 100% β€” FF
  • 99% β€” FC
  • 98% β€” FA
  • 97% β€” F7
  • 96% β€” F5
  • 95% β€” F2
  • 94% β€” F0
  • 93% β€” ED
  • 92% β€” EB
  • 91% β€” E8
  • 90% β€” E6
  • 89% β€” E3
  • 88% β€” E0
  • 87% β€” DE
  • 86% β€” DB
  • 85% β€” D9
  • 84% β€” D6
  • 83% β€” D4
  • 82% β€” D1
  • 81% β€” CF
  • 80% β€” CC
  • 79% β€” C9
  • 78% β€” C7
  • 77% β€” C4
  • 76% β€” C2
  • 75% β€” BF
  • 74% β€” BD
  • 73% β€” BA
  • 72% β€” B8
  • 71% β€” B5
  • 70% β€” B3
  • 69% β€” B0
  • 68% β€” AD
  • 67% β€” AB
  • 66% β€” A8
  • 65% β€” A6
  • 64% β€” A3
  • 63% β€” A1
  • 62% β€” 9E
  • 61% β€” 9C
  • 60% β€” 99
  • 59% β€” 96
  • 58% β€” 94
  • 57% β€” 91
  • 56% β€” 8F
  • 55% β€” 8C
  • 54% β€” 8A
  • 53% β€” 87
  • 52% β€” 85
  • 51% β€” 82
  • 50% β€” 80
  • 49% β€” 7D
  • 48% β€” 7A
  • 47% β€” 78
  • 46% β€” 75
  • 45% β€” 73
  • 44% β€” 70
  • 43% β€” 6E
  • 42% β€” 6B
  • 41% β€” 69
  • 40% β€” 66
  • 39% β€” 63
  • 38% β€” 61
  • 37% β€” 5E
  • 36% β€” 5C
  • 35% β€” 59
  • 34% β€” 57
  • 33% β€” 54
  • 32% β€” 52
  • 31% β€” 4F
  • 30% β€” 4D
  • 29% β€” 4A
  • 28% β€” 47
  • 27% β€” 45
  • 26% β€” 42
  • 25% β€” 40
  • 24% β€” 3D
  • 23% β€” 3B
  • 22% β€” 38
  • 21% β€” 36
  • 20% β€” 33
  • 19% β€” 30
  • 18% β€” 2E
  • 17% β€” 2B
  • 16% β€” 29
  • 15% β€” 26
  • 14% β€” 24
  • 13% β€” 21
  • 12% β€” 1F
  • 11% β€” 1C
  • 10% β€” 1A
  • 9% β€” 17
  • 8% β€” 14
  • 7% β€” 12
  • 6% β€” 0F
  • 5% β€” 0D
  • 4% β€” 0A
  • 3% β€” 08
  • 2% β€” 05
  • 1% β€” 03
  • 0% β€” 00
Last modified 1yr ago
Copy link