实现底部滑入式Modal及背景模糊效果的React技术求助

我们可以通过调整组件结构和添加CSS样式，实现你需要的三个效果：Modal底部上滑、背景模糊、按钮状态切换。

1. 重构组件结构 #

修改UpcomingEvents的JSX代码，新增背景遮罩层并统一控制Modal的显示逻辑：

import React, { useState } from "react";
import ActionButton from "../../components/ActionButton";
import AddEventActionCard from "../../components/AddEventActionCard";

import AppHeader from "../../components/AppHeader";
import FooterNav from "../../components/FooterNav";
import "../Upcoming_Events/UpcomingEvents.css";

const UpcomingEvents = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const toggleModal = () => setIsModalOpen(!isModalOpen);

  return (
    <div className={`upcoming-page ${isModalOpen ? "modal-active" : ""}`}>
      <AppHeader />
      <div className="upcoming-container">
        <div className="upcoming-card-container">
          <div className="upcoming-card-top-header">Upcoming Events</div>
          <div className="upcoming-card-top-events-scroll-container"></div>
        </div>
        
        {/* 背景遮罩 + Modal容器 */}
        {isModalOpen && (
          <div className="modal-backdrop" onClick={toggleModal}>
            <div className="modal-box" onClick={(e) => e.stopPropagation()}>
              <AddEventActionCard />
            </div>
          </div>
        )}

        {/* 按钮容器，绑定状态类 */}
        <div 
          onClick={toggleModal} 
          className={`action-btn-wrap ${isModalOpen ? "btn-white" : ""}`}
        >
          <ActionButton />
        </div>
      </div>
      <FooterNav />
    </div>
  );
};

export default UpcomingEvents;

2. 添加CSS样式实现动画与视觉效果 #

在UpcomingEvents.css中补充以下样式：

/* 页面根容器：Modal打开时给背景加模糊 */
.upcoming-page.modal-active .upcoming-container {
  filter: blur(8px);
  pointer-events: none; /* 禁止点击模糊区域的内容 */
}

/* 背景遮罩层 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

/* Modal卡片：从底部上滑动画 */
.modal-box {
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px;
  animation: slideUp 0.3s ease-out forwards;
  transform: translateY(100%);
}

/* 上滑动画关键帧 */
@keyframes slideUp {
  to {
    transform: translateY(0);
  }
}

/* 按钮状态：打开Modal时变白 */
.action-btn-wrap.btn-white {
  background: #fff;
  /* 如果ActionButton内部有图标，可在这里调整图标颜色，比如 color: #000; */
}

/* 确保按钮在Modal打开时依然可点击 */
.action-btn-wrap {
  position: relative;
  z-index: 200;
}

3. 核心逻辑说明 #

• 背景模糊：通过给页面根容器添加filter: blur()实现，配合pointer-events: none避免用户误触模糊区域的内容
• Modal上滑：利用CSS动画slideUp，初始将Modal定位在视口外（translateY(100%)），动画结束后滑入视口
• 按钮变色：通过动态添加btn-white类名，控制按钮的背景或内部元素颜色
• 遮罩关闭：给背景遮罩绑定关闭事件，同时在Modal卡片上阻止事件冒泡，避免点击Modal内部触发关闭

内容的提问来源于stack exchange，提问作者Jeff Barra