所以现在，当按钮（在右下角）被按下时，模态会出现，但是我希望当模态打开时，背景是模糊的。我还希望模态从底部向上滑动。现在，当按钮被按下时，它只会出现。对于顶部的樱桃，我希望当模态打开时，action按钮变成白色。下面是代码：

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>
      <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>
        {click ? <AddEventActionCard /> : ""}
        <div onClick={handleClick}>
          <ActionButton />
        </div>
      </div>
      <FooterNav />
    </div>
  );
};

export default UpcomingEvents;

screenshot
感谢您的协助！