score:1
Accepted answer
i think the best solution to your question is portals. you could easily do something like the following:
import { useintl } from "gatsby-plugin-intl"
import react, { useeffect, usecontext } from "react"
import reactdom from 'react-dom'
import { row, modal, button, form, col } from "react-bootstrap"
import bgtcontext from "../../context/bgt/bgtcontext"
import localization from "../../helpers/localization"
export default function sectionmodal({ show, onclose, section }) {
const intl = useintl()
return reactdom.createportal((
<modal
show={show}
onhide={onclose}
backdrop="static"
keyboard={false}
classname="bgt-modal-fullscreen"
>
<modal.header closebutton></modal.header>
<modal.body>
<p>hello world</p>
</modal.body>
</modal>
), document.queryselector(".main"));
}
Source: stackoverflow.com
Related Query
- React : How to display a modal popup only for that specific div
- How to append a React modal to a specific div?
- How to force Antd to append element as child element of div React renders to instead of to HTML body?
- How to set both linear-gradient and background image in a specific div using styles in React
- How can I jump to a div with a specific id in react
- How to display a div element on a specific key in a map in react
- How to append a given amount of columns as div elements on another div element in react
- How react append div * num?
- How to append react element div dynamically?
- how to append react div element from an array with a child element ? and how to give to mapped parent elements unique "key" props
- How to append html video tag to a div in React
- How to create a React Modal (which is appended to <body>) with transitions?
- How do you center a div element in react w/out external css file
- How to submit form component in modal dialogue using antd react component library
- How to close the modal in react native
- How to close a React Navigation modal with multiple screens in it
- Next.js: How to change css of root div __next on specific page?
- How to simulate mouse over event on a div using enzyme for testing a react application?
- how to hide and show a div in react
- How to append child to React element?
- Material-UI Drawer: How to position drawer in a specific div
- How to hide bottom navigation bar on a specific screen in react native?
- React CSS - how to apply CSS to specific pages only
- How to append element to variable to be render in react
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- How can I search for a component with specific key in React Developer Tools?
- how to hide or show a div if checkbox is selected in React JS
- In React Native, How Can I Use KeyboardAvoidingView with a Modal in iOS?
- How to clear react state in modal after closing?
- React how to dynamically set div height to follow suit of full window height including scroll
More Query from same tag
- React fetch to Express API not working, any tips?
- velocity-react - animating scrollTop after component update
- dynamically render a unique button on a react component that is being used several times on a page
- to create and send React RefObject as prop
- How to create React Context that passes a function with Typescript
- React Apollo to graphql-php server on different ports
- React-Materialize change brand text color
- Bootstrap Center Badge Text on Mobile
- searching in mongo specifically
- useState hook, setState function. Accessing previous state value
- Error when updating state with useState + TypeScript
- Access Table Header Row Key React
- React Stratp Carousel with HTML, Rows and more content inside
- Updating a nested array in reducer in Redux
- too many re-renders , infinite re-renderes
- `for` loops vs `.map` to iterate arrays
- Websocket server and npm start on localhost
- How can i re-render react component with infinite loop
- Can I build Android apps with react native?
- State is undefined when using console.log
- how to call function with parameter in JSX?
- react-pdf failed to view pdf file from remote url
- ComponentDidMount not working and no error is displaying
- Getting Error: "All files must be modules when the '--isolatedModules' flag is provide" in React with TypeScript
- React: objects are not valid as a React child
- ESLint prefer-arrow-callback on array.map
- react calendar timeline issue
- Open new React app when new router selected
- How do I render sibling elements without wrapping them in a parent tag?
- how to communicate between react and electron