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
Related
I am trying to use Modal view with typescript and react but it is not working. I think it might have something to do with how I am writing the tabindex below in my code in the first div. I copied the code from Bootstrap, but typescript made me change the string to a number. Is that the problem?
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<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">
<h5 className="modal-title" id="exampleModalLabel">
Modal title
</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">...</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>
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.
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.
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.
The modal-backdrop div gets added but I am not able to see the modal dilog.
Below is the code of my react component:
var OpenModal = React.createClass({
render: function(){
return(
<div>
<button type="button" className="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div className="modal fade" id="myModal" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Modal Header</h4>
</div>
<div className="modal-body">
<p>Some text in the modal.<br/>
fnfgjdg<br/>
sbdfbsdfbdfbdfb<br/>
fgdnbndbgdbfdvfgnfbfb<br/>
gnbvvghfnbvhfnb<br/>
</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
)
}
});
module.exports = OpenModal;
I just want to open a bootstrap modal in React. If anyone has any other working sample that would help but not using react bootstrap.