如何将此弹出窗口 window 置于最前面？

Question

我是 React 的新手。我使用 React 创建了电影应用程序项目。然后我为这个项目创建了一些额外的样式。我想为这个项目添加一个弹出窗口 window。我为这个组件写了一些代码。但是这个弹出组件出现在我的 Movielist 组件的后面。如何让这个弹出 window 到前面？

这是我的App.js代码

import React, { useEffect, useState } from "react"
import MovieList from "./components/MovieList"

const featured_api =
  "https://api.themoviedb.org/3/discover/movie?`api_key=b23a3ea528a2edc9d8e8d585a98023e&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1"`

const search_api =
  "https://api.themoviedb.org/3/search/movie?api_key=b23a3ea528a2edc9d8e8d585a98023e&query="

function App() {
  const [movies, setMovies] = useState([])
  const [search, setSearch] = useState("")

  useEffect(() => {
    getMovies(featured_api)
  }, [])

  const getMovies = (api) => {
    fetch(api)
      .then((res) => res.json())
      .then((data) => {
        setMovies(data.results)
      })
  }

  const handleOnSubmit = (e) => {
    e.preventDefault()

    if (search) {
      getMovies(search_api + search)
      setSearch("")
    }
  }

  const handleOnChange = (e) => {
    setSearch(e.target.value)
  }

  return (
    <>
      <header>
        <form onSubmit={handleOnSubmit}>
          <input
            className="search"
            type="text"
            placeholder="Search"
            value={search}
            onChange={handleOnChange}
          />
        </form>
      </header>
      <div className="movie_container">
        {movies.length > 0 &&
          movies.map((movie) => <MovieList key={movie.id} {...movie} />)}
      </div>
    </>
  )
}

export default App

这是我的 MovieList 组件

import React from "react"
import Window from "./Window"

const img_api = "https://image.tmdb.org/t/p/w500"

const MovieList = ({
  title,
  poster_path,
  overview,
  vote_average,
  release_date,
}) => (
  <section className="interface">
    <img
      src={
        poster_path
          ? img_api + poster_path
          : "https://images.pexels.com/photos/3693701/pexels-photo-3693701.jpeg?cs=srgb&dl=pexels-olenka-sergienko-3693701.jpg&fm=jpg"
      }
      alt={title}
    />
    <div className="title">
      <h3>{title}</h3>
      <p>{release_date}</p>
    </div>
    <Window />
  </section>
)

export default MovieList

这是我的Popup.js组件

import React from "react"

const Popup = (props) => {
  return (
    <div className="popup-box">
      <div className="box">
        <span className="close-icon" onClick={props.handleClose}>
          x
        </span>
        {props.content}
      </div>
    </div>
  )
}

export default Popup

这是我的Window.js组件

import React, { useState as uState } from "react"
import Popup from "./Popup"

function Window({ title, overview, vote_average }) {
  const [isOpen, setIsOpen] = uState(false)

  const togglePopup = () => {
    setIsOpen(!isOpen)
  }

  return (
    <div>
      <input
        className="btn"
        type="button"
        value="Read More"
        onClick={togglePopup}
      />
      {isOpen && (
        <Popup
          content={
            <>
              <b>{title}</b>
              <p>Some text</p>
            </>
          }
          handleClose={togglePopup}
        />
      )}
    </div>
  )
}

export default Window

CSS 文件

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #222831;
  color: white;
  font-family: "Roboto", sans-serif;
  margin: 0;
}

header {
  background-color: #393e46;
  padding: 1rem;
  display: flex;
  justify-content: center;
}

.search {
  background-color: transparent;
  border-radius: 10px;
  border: 2px solid #222831;
  outline: none;
  padding: 0.5rem;
  color: white;
  font-family: inherit;
  font-size: 1.2rem;
}

.movie_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.interface {
  background-color: #393e46;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin: 1rem;
  width: 200px;
}

.interface img {
  object-fit: cover;
  height: 300px;
  width: 100%;
}

.title {
  background-color: rgba(255, 255, 255, 0.712);
  color: #222831;
  padding: 1rem;
  position: absolute;
  bottom: 39px;
  left: 0;
  right: 0;
  overflow: auto;
  max-height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.interface:hover .title {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

@keyframes bounce {
  20% {
    transform: translateY(-6px);
  }
}

.popup-box {
  position: fixed;
  background: #00000050;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.box {
  position: relative;
  width: 70%;
  margin: 0 auto;
  height: auto;
  max-height: 70vh;
  margin-top: calc(100vh - 85vh - 20px);
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  border: 1px solid #999;
  overflow: auto;
}

.close-icon {
  content: "x";
  cursor: pointer;
  position: fixed;
  right: calc(15% - 30px);
  top: calc(100vh - 85vh - 33px);
  background: #393e46;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  border: 1px solid #999;
  font-size: 20px;
}

.btn {
  background-color: #4caf50;
  border: none;
  outline: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

Answer 1

这与反应无关。使用 css z-index 将元素置于最前面。您应该将带有 className="popup-box" 的 div 更改为 z-index 1000 或其他值

如何将此弹出窗口 window 置于最前面？

How to get this popup window to front?

javascript

reactjs

react-component

use-state