JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

JavaScript

// мелкий попап месседж (!Важно)
document.addEventListener('DOMContentLoaded', function() {
  const infoButton = document.querySelector('.tooltip__button.notification__info1-active');
  const popup = document.getElementById('notification-info1');
  const closeButton = popup.querySelector('.notification_close__btn');
  
  // Проверяем, существуют ли кнопка и попап
  if (!infoButton || !popup) {
    return;
  }
  // Проверяем, существует ли кнопка закрытия
  if (!closeButton) {
    return;
  }
  
  function showPopup() {
    popup.classList.add('active');
  }

  function hidePopup() {
    popup.classList.remove('active');
  }

  infoButton.addEventListener('click', showPopup);
  closeButton.addEventListener('click', hidePopup);

  // Используем делегирование событий для закрытия попапа при клике вне его
  document.addEventListener('click', function(event) {
    if (popup.classList.contains('active') && 
        !popup.contains(event.target) && 
        !infoButton.contains(event.target)) {
      hidePopup();
    }
  });
});