Блог

Я пытаюсь добавить функциональность для закрытия моего модального, позволяя пользователю щелкнуть в любом месте за пределами модального поля, чтобы вызвать событие закрытия. Я могу добиться этого, используя onClick функцию на моем модальном фоне. Однако, поскольку модальный элемент сам по себе является дочерним элементом фона, эта функция запускается и при нажатии на фактический модальный элемент.

Это структура с опущенным содержимым.

     <ModalBackground modalDisplay={modalOpen} data-testid="modal-background" onClick={closeModal}>
      <ModalContainer
        role="dialog"
        data-testid="modal"
        modalDisplay={modalOpen}
        ref={modalRef}
        aria-labelledby={modalHeaderId}
        aria-describedby={modalBodyId}
      >
  </ModalContainer>
</ModalBackground>
 

Мои стили следующие

 const ModalContainer = styled.div`
  border: 1px solid ${basic[300]};
  border-radius: 4px;
  width: 29rem;
  position: fixed;
  background-color: ${basic[100]};
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  ${(props) =>
    props.modalDisplay ? `visibility: visible;` : "visibility: hidden"}
`;

const ModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  ${(props) =>
    props.modalDisplay ? `visibility: visible;` : "visibility: hidden"}
`;
 

При желании я могу создать jsfiddle, но я надеюсь, что есть простое решение.

Я нашел способ решить эту проблему, добавив этот JS после модального, где я могу проверить, был ли нажат родительский или дочерний элемент перед изменением стилей:

 document.getElementById('ModalBackground').addEventListener("click", function(e) { if(e.target == this) closeModal('ModalBackground'); });
 

В вашем случае вам нужно будет отредактировать вашу функцию closeModal, чтобы включить этот тест.