I am working on a component with a modal. A button trigger the modal, then if you click on the button inside the modal, you are redirect to another page (using Link) and the modal is supposed to close.
Unfortunately, if I use data-dismiss the redirection does not work anymore.
Is there another way to do it?
Here is the code and thank you for your help:
<div
className="modal fade"
id="exampleModal"
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Commande OK
</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-footer text-center">
<Link
to="/offers"
className="col-6 justify-content-center"
>
<button
type="button"
className="btn btn-info"
>
Back
</button>
</Link>
</div>
</div>
</div>
</div>
I'd suggest using Local state in the component that has a modalOpen boolean property that is set to true or false depending on whether the modal is open or closed. The button on the modal should also have an onClick handler that sets the modalOpen to false once the button is clicked for redirection.
Ok I found a solution:
I add a function to the button: onClick={this.closeModal}
and then just add this function before render:
closeModal() {
$("#exampleModal").modal("toggle");
}
Hope it helps.
Related
I using Bootstrap 5. In a function component, I have a modal like this:
return (
<div>
{/* Button trigger modal */}
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
{/* Modal */}
<div className="modal fade" id="exampleModal" tabIndex={-1} aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
</div>
<div className="modal-body">
<img src={dog} alt="dog image" className="my-image"/>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
This works normally. However, when I checked the Network in dev-tools, I noticed that the image in Modal was loaded. If I use this component many times, there will be a lot of images loaded while they are not actually displayed. How to fix this?
<img src={dog} alt="dog image" className="my-image" loading="lazy"/> this works for web , should work here too , But best way is load those modal only if needed
I'm quite new to React and Bootstrap. I'm trying to implement a modal dialog on button click. My modal currently is not displaying - you can see on the 2nd snippet of code how I'm trying to include the modal using a boolean show variable.
I've seen various libraries which help to do this but I wanted to try understand how to make this work without those libraries first.
I'm not sure why this modal does not show.
const ModalContent = () => {
return (
<div className="modal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<p>Modal body text goes here. {modalInfo}</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
);
}
<div className="row">
<div className="col">
<table className="table table-hover">
...
</table>
<Pagination itemsCount={filtered.length}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={handlePageChange}/>
</div>
{show ? <ModalContent /> : null}
</div>
2 words, conditional rendering is the best way to do it. Like this:
<div className="row">
<div className="col">
<table className="table table-hover">
...
</table>
<Pagination itemsCount={filtered.length}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={handlePageChange}/>
</div>
{show && <ModalContent />}
</div>
the logic behind it is like this , if both sides of & operator are true , they will be rendered , if not, none of them will render, therefore causing the modal to not render at all.
Looking at the documentation, you are missing the button which should toggle the modal.
Page: https://getbootstrap.com/docs/4.0/components/modal/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can also setup a custom trigger using with this line of code:
Call a modal with id myModal with a single line of JavaScript:
$('#myModal').modal(options)
Options: https://getbootstrap.com/docs/4.0/components/modal/#options
(Not tested) you could also try to use Document.getElementById() to get the element and call modal.
That said, I don't know if it is a good idea to use jQuery when you already use React, but I think you already know that there is an implementation for React Bootstrap already.
I have this delete button here where in when you click this it suppose to show the bootstrap confirmation modal that looks like this:
So I have this button here along with the html code for the modal:
<button classNameName="btn btn-sm" data-bs-toggle="modal" data-bs-target="#deleteResortOwner" onClick={() => deleteHandler(resort._id)}>
DELETE
</button>
<div className="modal fade" id="deleteResortOwner" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteResortOwnerLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="deleteResortOwnerLabel">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<p>Are you sure you want to delete this resort?</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Not Sure</button>
<button type="button" className="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Now on my onClick effect that will call the deleteHandler method:
const deleteHandler = (id) => {
dispatch(deleteResortOwner(id))
}
This will of course delete the item directly without showing a confirmation modal. I used to do this like this which is a basic alert:
const deleteHandler = (id) => {
if(window.confirm('Are you sure')){
dispatch(deleteResort(id))
}
}
But I need this to run like a modal not an alert. Wondering how can I attain this and still open the modal to do the confirmation instead of the window.confirm? This will also must delete the item if the "Yes" button on the modal was click and will simply close the modal when "Close" button was click.
Any idea how to do this? Please help.
Use react-modal NPM package and then add styles using bootstrap.
And check it's docs for more details.
Sorry for my inglish:
I create a component of a modal in React, compile good, but the console show this error:
Warning: Invalid DOM property tabindex. Did you mean tabIndex? in div (at ModalComponent.js:10) in div (at ModalComponent.js:5) in ModalComponent (at src/index.js:24) in div (at src/index.js:23) in ModalCreate (at src/index.js:32) in StrictMode (at src/index.js:31)
I' know that in react the atribute must be camalCase but bootstrap need this atribute to work. There is my code:
const ModalComponent = (props) => {
return (
<div> {/* Tiene qe haber un solo elemento Padre */}
<button type="button" className="btn btn-primary" data-toggle="modal" data-target={props.obj.id}>
{props.obj.btnCallModal}
</button>
<div className="modal fade" id={props.obj.id} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">{props.obj.titulo}</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
{props.obj.body}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">{props.obj.btnInModal}</button>
</div>
</div>
</div>
</div>
</div>
)
};
In react, tabIndex corresponds to tabindex in html. Change it to tabIndex and the modal should work as expected.
Using React-Bootstrap, I have a modal that conditionally opens. The modal works fine in ie 11.
Here is the modal that works in ie11..
handleCloseAlert() {
this.setState({ alertShow: false });
}
handleShowAlert() {
this.setState({ alertShow: true });
}
noResults() {
this.setState({alertShow:true})
}
<Modal show={this.state.alertShow}
onHide={this.handleCloseAlert}
{...this.props}
data-toggle="modal"
size="sm"
aria-labelledby="contained-modal-title-vcenter"
centered>
<Modal.Header closeButton>
<Modal.Body>No results found</Modal.Body>
</Modal.Header>
</Modal>
When I test in ie10 the screen goes white when the modal is supposed to open.
Here is the error I get in console..
[object Error]{description: "Unable to s...", message: "Unable to s...", name: "TypeError", number: -2146823281, stack:
Unhandled promise rejection TypeError: Unable to set property 'paddingRight' of undefined or null reference
I also tested using just Bootstrap code and the modal works with the example code from bootstrap's website. I suppose I could use their code, but I couldnt firgure out how to conditionally open and close the modal.
Here is the example from bootstrap that is not coded for conditional react rendering..
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I tried adding show={this.state.alertShow} to the modal tag, but I get this error in the console.
Warning: Received `false` for a non-boolean attribute `show`.
If you want to write it to the DOM, pass a string instead: show="false" or show={value.toString()}.
If you used to conditionally omit it with show={condition && value}, pass show={condition ? value : undefined} instead.
Is there a way to keep my current code and get it to work with ie10? Or do I need to recode without React-Bootstrap?
I also have import 'react-app-polyfill/ie9'; in my index.js
Modal is working with the new react-bootstrap update