This is a continuation from my previous post Rendering Modal Popup
After editing my code, I was able to launch my modal pop-up but had issues having it styled the same way as in the tutorial.
This is the desired styling that I pulled from a React-Boostrap tutorial
https://react-bootstrap.github.io/components/modal/
After running the same code as in the tutorial, this was my output. It's styled in plain HTML.
This is my import statement which I've used to import dependencies from the tutorial
import { Button, Modal } from 'react-bootstrap';
Updated code which successfully launched my modal pop-up
const Example = ({ show, onClose, onSave }) => (
<Modal show={show} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
<Button variant="primary" onClick={onSave}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
)
const addToCart = () => {
Axios.post(process.env.REACT_APP_BACKEND_API + "/cart/",)
.then((res) => {
setShowExample(true);
})
.catch((err) => {
if (err.response && err.response.status === 401) {
setIsLoggedIn(false);
}
});
};
<div className="field is-grouped">
<div className="control">
<button className="button is-primary" onClick={addToCart}>
ADD TO CART
</button>
<Example //added
show={showExample}
onClose={() => setShowExample(false)}
onSave={() => setShowExample(false)}
/>
</div>
Related
I am trying to let modal screen to disappear when I click close or save & close button. But I cannot find which line prevent close feature to work.
What could be wrong? I really want to let modal to disappear when I click button inside of it.
note: I use latest react-bootstrap (bootstrap 5)
function MemberMgt() {
const [showModal, setShowModal] = useState(false);
const handleCloseClick = () => {
setShowModal(false);
};
const handleEditClick = () => {
setShowModal(true);
};
...
<tr onClick={handleEditClick}>
<Modal show={showModal} onHide={handleCloseClick}>
<Modal.Header closeButton>
<Modal.Title>Edit Screen</Modal.Title>
</Modal.Header>
<Modal.Body>
<li>ID</li>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseClick}>
Close
</Button>
<Button variant="primary" onClick={handleCloseClick}>
Save & Close
</Button>
</Modal.Footer>
</Modal>
...
When clicking on modal window body, it runs outer div's onClick handler. event.stoppropagation() working fine for button inside outer div and buttons inside modal but don't know how to unbind outer div click handler on modal body.
sample code (Modal is not working on csb, please run on your code editor)
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
export default function App() {
const [show, setShow] = useState(false);
const handleShow = (event) => {
event.stopPropagation();
setShow(true);
};
const handleClose = (event) => {
event.stopPropagation();
setShow(false);
};
const deleteModal = () => {
return (
<Modal
id="deleteModal"
className="modal"
show={show}
onHide={handleClose}
centered
size="sm"
backdrop="static"
keyboard={false}
>
<Modal.Body>
<div>
<span>Delete Tweet ?</span>
</div>
<div>This can’t be undone</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary">Delete</Button>
</Modal.Footer>
</Modal>
);
};
const postHandler = () => {
alert("clicked on div");
};
return (
<div onClick={postHandler} style={{ border: "1px solid" }}>
{deleteModal()}
<h1>Hello CodeSandbox</h1>
<Button variant="info" onClick={handleShow}>
Delete
</Button>
</div>
);
}
P.S- I'm using react-bootstrap for creating modal.
return (
<>
{show && deleteModal()} // just move this logic outside the div
<div onClick={postHandler} style={{ border: '1px solid' }}>
<h1>Hello CodeSandbox</h1>
<Button variant="info" onClick={handleShow}>
Delete
</Button>
</div>
</>
);
Hey, if you just move the deleteModal outside the div then it would solve your problem.
For example, i have this functon that returns to me some ids and i get delete this posts with the id's returned with: onClick={() => { Delete(idvalue[i]) }}
However I need to open a modal before deleting the item asking if the person is sure they want to delete, and when they click on the yes I have no idea how to pass the right value to delete and where will stay this onClick to open the modal.
function Idchecker() {
for (let i = 0; i < idvalue.length; i++) {
if (idvalue[i] == item.id) {
return (
<div className="img-array">
<button className="click-img" onClick={() => { Delete(idvalue[i]) }}>
<img src={trash} alt="botão excluir" className="imgsbtns" />
</button>
<button className="click-img">
<img src={edit} alt="botão editar" className="imgsbtns" />
</button>
</div>
)
}
}
}
the modal:
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
style={{ fontFamily: "Questrial" }}
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
DELETE THE POST
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
are you sure?
</p>
<Button onClick={Delete}>YES</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>CLOSE</Button>
</Modal.Footer>
</Modal>
);
}
Add two state:
openDeleteModal to manage opening modal (argument for example, you have this argument yet)
deleteId to store id.
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState(null);
When you click on post you must open modal and update deleteId, so rewrite onClick function:
onClick={()=>{
setDeleteId(idvalue[i]);
setOpenDeleteModal(true)}
}
Pass deleteId and setOpenModal via props to Modal component and rewrite modal buttons function:
<Modal.Body>
<p>
are you sure?
</p>
<Button
onClick={()=>{
Delete(deleteId)
setOpenDeleteModal(false) //close modal after delete
}}>
YES
</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={()=>setOpenDeleteModal(false)}>CLOSE</Button>
</Modal.Footer>
So I have just added a Modal from react-Modal to a page through a button click, the problem I am facing is when i click that button to make the modal pop up, it does but the content of the page the modal covers seeps through, so the Modal looks like this.
The table etc shouldn't be there, only a blank white screen.
Can anyone help me please?
Below is the first class where I click to show the modal.
const [showModal, setShowModal] = useState(false)
<button onClick={() => { setShowModal(true) }} className="paddingNextButton float-right viewButtonHover btn btn-md btn-outline-secondary"> Next</button>
<ModalForm isModalOpen={showModal} closeModal={() => { setShowModal(false) }} />
Below is another class of the Modal itself.
import React from 'react'
import Modal from 'react-modal'
import { Overlay } from 'react-bootstrap'
Modal.setAppElement('#root')
function ModalForm({ isModalOpen, closeModal }) {
return (
<div>
<Modal isOpen={isModalOpen} onRequestClose={closeModal}
style={
{
overlay: {
backgroundColor: "grey"
},
content: {
color: "red"
}
}
}
>
<h1>Title</h1>
<p></p>
</Modal>
</div>
)
}
export default ModalForm
Ah, I see the problem now. You don't have a Modal.Body, or a Modal.Header for that matter. What you need should be something like this:
<Modal isOpen={isModalOpen} onRequestClose={closeModal} style={{...}}>
<Modal.Header closeButton>
<Modal.Title>
Title
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Modal body goes here</p>
</Modal.Body>
</Modal>
I'm trying to display a modal when cliking on a button using react-bootstrap, copy pasted the code from https://react-bootstrap.github.io/components/modal/, but when I open the modal it displays an unexpected white background. Here is a screenshot of the issue and here is another screenshot of the expected behavior.
Here is my code :
function PartnershipCardList({partnerships}) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return(
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default PartnershipCardList
If you could help me in any way that would be really kind, have a good day