Accessible modal dialog component for React.JS
Questions tagged [react-modal]
260 questions
0
votes
1 answer
How do I add modal for a delete popup?
I'm new to react and now I'm trying to make the delete alert as a modal, can anyone tell me where do I put it?
const handleDelete = (id) => {
const confirm = window.confirm("Delete this ?");
if(confirm) {
…
Dan
- 7
- 2
0
votes
0 answers
install lib again after imported file from github
After I imported the code from github and run npm run dev to show website, the error below occur. So, I must reinstalled three libraries react-beautiful-dnd, react-modal, react-datepicker to make the website work.
Error: The following dependencies…
0
votes
0 answers
How to use print component on react-modal component to preserve the rendering css without inline styles in Spfx React 15
So I have been trying to implement a print function on the React Modal, thus I will have to implement it using inline style css. Is there any alternative library or implementation available to preserve my css using external css or scss file
My…
trollzkingopaf
- 9
- 1
0
votes
0 answers
ReactModal Error : NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
I keep getting the error every time I open multiple times of modal and then close it. However, if I was commenting on the API endpoint where I fetch the data the issue doesn't exist everytime I close the modal. I would like to have a dynamic element…
CodeEx
- 11
- 2
0
votes
0 answers
React Navigation Android HW back button handling while React Native Modal is Opened
i came across fairly common (or i thought so originally) issue that causes me headache. i have bare react-native project + react-navigation with sctructure:
Tab.screen: StackNavigator1
Tab.screen: StackNavigator2
Tab.screen:…
maXX
- 136
- 4
0
votes
0 answers
React Native - create top bar modal that allows interaction outside of content
In React Native, how can I create a React Modal that allows the user to still interact with the rest of the items that it does not cover when it is opened?
Just like in Whatsapp, when you select a message, a top bar would appear with different…
JohnnySmith88
- 162
- 1
- 10
0
votes
0 answers
How to use multiple Antd forms inside one modal in React.Js?
I have a modal and inside that I have two Antd forms. When I try to access my second form upon select onChange, it's giving as undefined.
***console.log(secondForm) = undefined***
What is the proper way to fix the issue?
const GenerateReportModal =…
Kalana Tebel
- 135
- 4
- 17
0
votes
1 answer
Unable to scroll vertically in modal in React
I'm trying to show modal in my React Project. I set the overflow of body to hidden through useEffect when the modal is showing (otherwise, it shows the scrollbar of main page's content beneath modal). And it prvents scrolling of background content…
Fuaad
- 197
- 15
0
votes
0 answers
How to block vertical scroll while showing modal
In my React Project, I need to show a modal for mobile screen where it needs to cover all the screen and block scrolling for the content beneath. I tried to make overflow-y: hidden for body through useEffect when modal shows up, but I consider it…
Fuaad
- 197
- 15
0
votes
0 answers
Displaying modal component as a card in reactjs
So for my project I'm using mui elements for the UI part but for displaying real time data on a button click I got this answer in which the person had used Modal component from react-bootstrap that basically ruined the alignment of my website but…
user16347260
- 1
- 2
0
votes
0 answers
Opening modal from FlatList Item and pass item data to it using state variable becomes very laggy and sometimes app not responding
Open a modal for each item of the flatlist and pass that particular item data to that modal data using state Variable becomes very laggy and sometimes app not responding,
const [showFeedMoreModal, setShowFeedMoreModal] = useState(false);
const…
React_Coder
- 353
- 2
- 12
0
votes
0 answers
how to display Card image in full screen
i use this code to display cards in homepage.js component
i got the data in my cards good but when i click on the image to get it with full screen i got same image every time
noimg is an image that when the array of images empty i display…
husam
- 33
- 1
- 6
0
votes
1 answer
How can I center the react bootstrap modal? "Vertically centered"
I already assigned: aria-labelledby="contained-modal-title-vcenter" centered but it's not working.
Even this react bootstrap example "Vertically centered" not working.
https://react-bootstrap.netlify.app/components/modal/#rb-docs-content
Saddiqa Safdar
- 1
- 1
0
votes
3 answers
React Native Modal Undefined not a function
I want to ask a question that has been asked before but does not have a concrete solution
I am using modal to open somewhere on my homepage in react native(
in HomePage in modal homestack)
When I go to CategoriesStack (I get this error here, but it…
aysekaplan
- 3
- 4
0
votes
0 answers
ReactJS - Sending data from Main Form and Dynamic Form (react-modal) with Formik
I have a problem for send data on multiple form.
I have a main form and modals form.
For main form I want to send an Email, and for modals form I want to send comment with dynamic data.
My big problem is for Modals Form, I have some dynamic modals…
DIR
- 57
- 4