modal.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!-- ======================= Modal ======================= -->
  2. <style>
  3. .modal-shadow {
  4. position: absolute;
  5. top: 0px;
  6. left: 0px;
  7. right: 0px;
  8. bottom: 0px;
  9. background: rgba(0, 0, 0, .75);
  10. z-index: 3;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. padding: 10px;
  15. transition: .2s all;
  16. opacity: 1;
  17. }
  18. .modal-shadow.hidden {
  19. display: block;
  20. opacity: 0;
  21. pointer-events: none;
  22. }
  23. .modal {
  24. max-width: 600px;
  25. min-height: 300px;
  26. max-height: 90vh;
  27. overflow: auto;
  28. width: 100%;
  29. min-width: 50%;
  30. position: relative;
  31. background: var(--body-background);
  32. color: var(--body-color);
  33. }
  34. .modal > .close {
  35. position: absolute;
  36. top: 0em;
  37. right: .25em;
  38. background: none;
  39. color: var(--chrome-color);
  40. border: none;
  41. box-shadow: none;
  42. font-size: 200%;
  43. }
  44. .modal > .close:after {
  45. display: none;
  46. }
  47. .modal > * > *:first-child {
  48. margin-top: 0px;
  49. }
  50. </style>
  51. <div class="modal-shadow hidden">
  52. <div class="modal">
  53. <button class="close">×</button>
  54. </div>
  55. </div>
  56. <script>
  57. function showModal() {
  58. $('.modal-shadow').classList.remove('hidden');
  59. $('.modal > .close').focus();
  60. }
  61. function hideModal() {
  62. $('.modal-shadow').classList.add('hidden');
  63. $('.play-pause').focus();
  64. resizeEvent(null);
  65. }
  66. $('.modal > .close').addEventListener('click', evt => {
  67. clearSelector('.modal > section');
  68. hideModal();
  69. });
  70. </script>
  71. <!-- ===================================================== -->