看看这个关于创建模态的反应代码：
import * as React from "react";
import "./styles.css";
function Modal({ handleClose }) {
return (
<div onClick={handleClose}>
<dialog>
<header>
<button onClick={handleClose}>X</button>
<h2>Modal</h2>
</header>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi
tincidunt ornare massa. Morbi enim nunc faucibus a pellentesque sit
amet. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi
nullam. Eget dolor morbi non arcu risus. Integer eget aliquet nibh
praesent tristique magna sit amet purus. Nullam vehicula ipsum a arcu.
Vitae proin sagittis nisl rhoncus mattis rhoncus. Risus feugiat in ante
metus dictum at tempor.
</p>
</section>
</dialog>
</div>
);
}
export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<div className="container">
{/* Modal */}
{isOpen && <Modal handleClose={() => setIsOpen(false)} />}
{/* Main Content */}
<main>
<header>
<h1>Test-Modal</h1>
</header>
{["red", "blue", "green", "pink", "purple", "yellow"].map(
(color, index) => {
return (
<section
key={index}
style={{
backgroundColor: color,
width: "100%",
height: "50vh",
}}
/>
);
}
)}
<button className="primary" onClick={() => setIsOpen(true)}>
openModal
</button>
</main>
</div>
);
}
styles.csshtml {
background-color: black;
color: white;
}
.container {
margin: 0 auto;
max-width: 1100px;
padding: 50px;
position: relative;
}
main {
margin: auto;
padding: 24px;
}
main > header {
position: sticky;
top: 0;
background: black;
text-align: center;
padding: 24px;
}
dialog {
position: fixed;
display: grid;
grid-template-rows: auto 1fr;
top: 40px;
background: transparent;
width: 75vw;
margin: auto;
animation: expand 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
border-radius: 8px;
padding: 32px;
z-index: 10;
color: white;
}
dialog section {
max-height: calc(90vh - 120px);
overflow: auto;
}
dialog button {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
}
div:has(dialog) {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
/* width: 100%; */
/* height: 100%; */
z-index: 9;
display: flex;
align-items: center;
justify-content: center;
inset: 0;
}
.primary {
position: fixed;
bottom: 40px;
right: 40px;
}
您可以在此处运行完整代码。
我有几个问题：
<main>会闪烁并且内容会回到顶部？
main中的内容？
如果我像这样使模态更简单：
<div
style={{
backgroundColor: "rgba(0,0,0,0.5)",
zIndex: 9999,
display: "flex",
justifyContent: "center",
alignItems: "center",
inset: 0,
position: "fixed",
}}
onClick={handleClose}
>
<div style={{ backgroundColor: "white", padding: "30px" }}>
<h2 style={{ color: "black" }}>some title...</h2>
<p style={{ color: "black" }}>some content</p>
</div>
</div>;
然后一切都很好。该错误似乎来自 css。
我想找出导致该错误的原因以及如何修复它（如果模态如此复杂）。
//App.js
import "./styles.css";
import React from "react";
function Modal({ handleClose }) {
return (
<div onClick={handleClose}>
<dialog>
<header>
<button onClick={handleClose}>X</button>
<h2>Modal</h2>
</header>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ullamcorper morbi tincidunt ornare massa. Morbi enim nunc faucibus a
pellentesque sit amet. Duis tristique sollicitudin nibh sit amet
commodo nulla facilisi nullam. Eget dolor morbi non arcu risus.
Integer eget aliquet nibh praesent tristique magna sit amet purus.
Nullam vehicula ipsum a arcu. Vitae proin sagittis nisl rhoncus
mattis rhoncus. Risus feugiat in ante metus dictum at tempor.
</p>
</section>
</dialog>
</div>
);
}
export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<div className="container">
{/* Modal */}
{isOpen && <Modal handleClose={() => setIsOpen(false)} />}
{/* Main Content */}
<main className="colors">
<header>
<h1>Test-Modal</h1>
</header>
{["red", "blue", "green", "pink", "purple", "yellow"].map(
(color, index) => {
return (
<section
key={index}
style={{
backgroundColor: color,
width: "100%",
height: "50vh",
}}
/>
);
}
)}
<button
className="primary"
onClick={() => {
setIsOpen(true);
if (setIsOpen) {
document.body.style.overflow = "scroll";
}
}}
>
openModal
</button>
</main>
</div>
);
}/* style.css*/
html {
background-color: black;
color: white;
}
.container {
margin: 0 auto;
max-width: 1100px;
padding: 50px;
position: relative;
}
main {
margin: auto;
padding: 24px;
}
main > header {
position: sticky;
top: 0;
background: black;
text-align: center;
padding: 24px;
}
dialog {
position: fixed;
display: grid;
grid-template-rows: auto 1fr;
top: 40px;
width: 75vw;
margin: auto;
animation: expand 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
border-radius: 8px;
padding: 32px;
z-index: 10;
/* changed for visibility */
background: rgba(255, 255, 255, 0.8);
color: #111;
line-height: 1.3;
}
dialog section {
max-height: calc(90vh - 120px);
overflow: auto;
}
dialog button {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
}
div:has(dialog) {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
/* width: 100%; */
/* height: 100%; */
z-index: 9;
display: block;
align-items: center;
justify-content: center;
inset: 0;
}
.primary {
position: fixed;
bottom: 40px;
right: 40px;
}
您可以使用“react-modal”中的 ReactModal，当 isOpen 属性为 true 时，换句话说，当 Modal 打开时，它可以为您提供功能。
我有类似“onAfterOpen”的功能。阅读更多有关 -
http://reactcommunity.org/react-modal/
但是，现在您可以使用此解决方法。当“isSetOpen”为true时，我在App中做了一些更改。 还对对话框元素进行了一些更改，使其更加明显。例如背景颜色、颜色、行高。