modal.js 1.2 KB

123456789101112131415161718192021222324252627282930313233
  1. (function () {
  2. const cnetModalRegisteredElements = new Set();
  3. onUiUpdate(() => {
  4. // Get all the buttons that open a modal
  5. const btns = gradioApp().querySelectorAll(".cnet-modal-open");
  6. // Get all the <span> elements that close a modal
  7. const spans = document.querySelectorAll(".cnet-modal-close");
  8. // For each button, add a click event listener that opens the corresponding modal
  9. btns.forEach((btn) => {
  10. if (cnetModalRegisteredElements.has(btn)) return;
  11. cnetModalRegisteredElements.add(btn);
  12. const modalId = btn.id.replace('cnet-modal-open-', '');
  13. const modal = document.getElementById("cnet-modal-" + modalId);
  14. btn.addEventListener('click', () => {
  15. modal.style.display = "block";
  16. });
  17. });
  18. // For each <span> element, add a click event listener that closes the corresponding modal
  19. spans.forEach((span) => {
  20. if (cnetModalRegisteredElements.has(span)) return;
  21. cnetModalRegisteredElements.add(span);
  22. const modal = span.parentNode;
  23. span.addEventListener('click', () => {
  24. modal.style.display = "none";
  25. });
  26. });
  27. });
  28. })();