overlay.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <style>
  2. overlay {
  3. position: absolute;
  4. z-index: 99;
  5. opacity: 0;
  6. display: none;
  7. justify-content: center;
  8. align-items: center;
  9. -webkit-transition: opacity 1s ease;
  10. -moz-transition: opacity 1s ease;
  11. transition: opacity 1s ease;
  12. }
  13. .overlay-item {
  14. width: 100%;
  15. height: 100%;
  16. display: none;
  17. align-items: center;
  18. justify-content: center;
  19. background-color: rgba(121, 121, 121, 0.3);
  20. }
  21. error.overlay-item {
  22. background-color: rgba(121, 121, 121, 1);
  23. }
  24. div#close-button {
  25. position: absolute;
  26. top: 10px;
  27. right: 10px;
  28. width: 30px;
  29. height: 30px;
  30. cursor: pointer;
  31. }
  32. div#close-button img {
  33. width: 100%;
  34. }
  35. </style>
  36. <div id="close-button">
  37. <img src="{{closeImage}}" alt="{{closeText}}">
  38. </div>
  39. <help class="overlay-item"></help>
  40. <error class="overlay-item"></error>
  41. <share class="overlay-item"></share>