Блог

пожалуйста, помогите! Почему при нажатии на мою модальную модель модель исчезает. Я ожидал, только если щелкнуть вне модального. Мне нужно изменить z-индекс или что? пожалуйста, проверьте пример.

Реальная функция закрытия находится на контекстной странице, но она работает хорошо. Я пытаюсь изменить z-индекс, но он все еще не работает

 export default class FeaturedPortfolio extends Component {
  static contextType = PortfolioContext;

  render() {
    let { loading, featuredPortfolio: portfolio } = this.context;
    portfolio = portfolio.map((portfolios) => {
      return <SinglePortfolio key={portfolios.id} portfolios={portfolios} />;
    });
    return (
      <PortfolioConsumer>
        {(value) => {
          const { modalPortfolioOpen } = value;
          if (!modalPortfolioOpen) {
            return null;
          } else {
            return (
              <motion.div
                initial="out"
                animate="in"
                exit="out"
                variants={pageVariant}
                transition={pageTransition}
              >
                <CloseSection
                  onClick={() => {
                    value.closePortfolioModal();
                  }}
                >
                  <Section>
                    <div className="row-title">
                      <Title title="portfolio" />
                    </div>
                    <ModalContainer>
                      <div className="featured-rooms-center">
                        {loading ? <Loading /> : portfolio}
                      </div>
                    </ModalContainer>

                    <button
                      className="btn-close"
                      onClick={() => {
                        value.closePortfolioModal();
                      }}
                    >
                      <i className="fas fa-times-circle" title="Close" />
                    </button>
                    <div className="button-row">
                      <Link to="/portfolios/">
                        <button className="btn-primary">See all</button>
                      </Link>
                    </div>
                  </Section>
                </CloseSection>
              </motion.div>
            );
          }
        }}
      </PortfolioConsumer>
    );
  }
}

const CloseSection = styled.div`
  color: rgba(2, 2, 34, 0.404);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
`;
const Section = styled.div`
  position: fixed;
  padding: 0 0;
  z-index: 2;
  width: 90%;
  height: 60%;
  left: 5%;
  right: 5%;
  position: absolute;
  top: 20%;
  bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mainDark);
  box-shadow: 0 0 40px -10px var(--mainAccent);
  border-radius: 12px;
  .row-title {
    margin-top: 0.5rem;
    justify-content: center;
    position: absolute;
    top: 0;
  }
  

Спасибо за вашу помощь.

Наконец, найдите решение моей проблемы, поэтому, если вам нужен закрытый модал при нажатии за пределами моего модала, мне просто нужно создать раздел закрытия, отделенный от модального содержимого, и поместить z-индекс любителя.

 <CloseSection
onClick={() => {
value.closePortfolioModal();
}}
/>
  const CloseSection = styled.div`
  color: rgba(2, 2, 34, 0.404);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
;`