admin管理员组文章数量:1317734
I'm trying to make an overlay that will appear when I clicked the menu button and close when clicked anywhere on the page. But nothing is happening when I clicked the button.
I'm still new to React Hooks, so I hope you'll understand if I make obvious mistakes.
Here are my codes:
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const modalRoot = document.getElementById("modal-root");
const Modal = props => {
return ReactDOM.createPortal(
<div className="overlay">{props.children}</div>,
modalRoot
);
};
export default function App() {
const [open, setOpen] = React.useState(false);
return (
<div className="App">
<button onClick={() => setOpen(!open)}>Menu</button>
{open && <Modal in={open}>Click anywhere to close</Modal>}
</div>
);
}
App.css
body {
font-family: sans-serif;
}
.App {
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
Here's a link to CodeSandbox
I'm trying to make an overlay that will appear when I clicked the menu button and close when clicked anywhere on the page. But nothing is happening when I clicked the button.
I'm still new to React Hooks, so I hope you'll understand if I make obvious mistakes.
Here are my codes:
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const modalRoot = document.getElementById("modal-root");
const Modal = props => {
return ReactDOM.createPortal(
<div className="overlay">{props.children}</div>,
modalRoot
);
};
export default function App() {
const [open, setOpen] = React.useState(false);
return (
<div className="App">
<button onClick={() => setOpen(!open)}>Menu</button>
{open && <Modal in={open}>Click anywhere to close</Modal>}
</div>
);
}
App.css
body {
font-family: sans-serif;
}
.App {
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
Here's a link to CodeSandbox
Share Improve this question asked May 12, 2020 at 10:39 Mohammed AskerMohammed Asker 711 gold badge3 silver badges17 bronze badges2 Answers
Reset to default 2In your styles.css
, you are setting the CSS display
property to none
. This should be changed to display: block
.
The Modal will then be only displayed when the value of open
is true
.
you probably found the answer already but you'll need to change your display: none to display: block and then use visibility: hidden (when the modal is closed) and visibility: visible when the modal is open
本文标签: javascriptHow to create an overlay with ReactStack Overflow
版权声明:本文标题:javascript - How to create an overlay with React? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742020491a2414496.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论