In React
you can use portales
assigning the ids to divs other than the main one and thus work well with them z-index
as modals, with Next.js, how would it be in this case?
Would a div be added with the id of the extended document?
this would be in react:
html:
<div id="modal"></div>
<div id="main"></div>
app.js
import ReactDOM from 'react-dom';
const App = () => {
return (
<div className="App">
{ReactDOM.createPortal(<h1>Modal, esta fuera del div main</h1>, document.getElementById('modal'))}
<header className="App-header">
....
</header>
</div>
);
}
export default App;
Since Nextjs
the document is extended and the application remains in<Main />
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body className="my-body-class">
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Follow the next steps:
_document.js
in the folder of/pages
, and here you have to render the HTML and inside the body you have to have in this case<div id=tooltip>
hook
with the initial state infalse
and then change it totrue
withuseEffect
and return it again infalse
and well if it istrue
we will create the portal otherwise we will returnnull
:[
If it is still not clear to you, I recommend you watch this tutorial.