React模态框优化需求：背景模糊、底部滑入、按钮样式切换

针对需求中的三个优化点，以下是具体实现步骤：

1. 背景模糊效果实现 #

通过给页面背景内容添加模糊滤镜，同时禁用模糊区域的点击事件，避免干扰modal操作：

结构调整 #

将原本的背景内容（事件卡片、底部导航）包裹在统一容器中，根据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 [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);

  return (
    <div className="page-wrapper">
      <AppHeader />
      {/* 背景内容容器，根据状态添加模糊类 */}
      <div className={`background-content ${click ? 'blur' : ''}`}>
        <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>
        </div>
        <FooterNav />
      </div>

      {/* Modal组件 */}
      {click && <AddEventActionCard className={`modal ${click ? 'slide-in' : ''}`} />}

      {/* 操作按钮容器，确保在最上层 */}
      <div className="action-button-wrapper" onClick={handleClick}>
        <ActionButton isActive={click} />
      </div>
    </div>
  );
};

export default UpcomingEvents;

CSS样式添加 #

.page-wrapper {
  position: relative;
  min-height: 100vh;
}

.background-content {
  transition: filter 0.3s ease;
}

/* 模糊效果样式 */
.blur {
  filter: blur(6px);
  pointer-events: none; /* 禁用模糊区域的点击事件 */
}

2. Modal底部滑入动画 #

通过CSS transform 和过渡动画实现从底部滑入的效果：

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff; /* 根据设计调整背景色 */
  transform: translateY(100%); /* 默认隐藏在视口外 */
  transition: transform 0.3s ease-out;
  z-index: 100; /* 确保在背景之上 */
}

.modal.slide-in {
  transform: translateY(0); /* 显示时滑入视口 */
}

3. 操作按钮变白 #

给ActionButton组件传递状态props，根据modal显示状态切换样式：

修改ActionButton组件（示例） #

// ActionButton.jsx
const ActionButton = ({ isActive = false }) => {
  return (
    <button 
      className={`action-button ${isActive ? 'is-active' : ''}`}
    >
      {/* 按钮内部图标/文字，示例为"+" */}
      +
    </button>
  );
};

export default ActionButton;

添加按钮激活样式 #

.action-button.is-active {
  background-color: #fff;
  border-color: #e0e0e0; /* 可选：调整边框色 */
  color: #333; /* 可选：调整文字/图标颜色 */
}

/* 按钮容器固定在右下角 */
.action-button-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 101; /* 确保在modal之上 */
}

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