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>
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.
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.
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.
I have a modal which i am trying to close from the controller - however i am unable to do so
<button type="button" class="add-entry-btn-group" data-animation="am-fade- and-slide-top" data-template-url="states/../numbersModal.html" bs- modal="modal">New</button>
Modal HTML ->
numbersModal.html -
<div class="modal" id="addNumbersModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="addNumbersModal"
data-animation="am-fade-and-scale" data-placement="center" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form method="POST" class="form-horizontal group-border-dashed" name="addNumbersForm" novalidate>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title"> ID Numbers</h4>
</div>
<button class="btn btn-default" type="button" ng-click="closeIdNumbersModal()">
<span class="glyphicon glyphicon-remove"></span> Close</button>
<button type="button" class="btn btn-default" type="reset" ng-click="idNumbers.closeIdNumbersModal()" data-dismiss="modal">Cancel</button>
<button type="submit" ng-click="idNumbers.saveIdNumbers()" class="btn btn-primary">Save</button>
Controller ->
function closeIdNumbersModal() {
//tried all these things - none works
vm.addIdNumbersModal.$promise.then(vm.addIdNumbersModal.hide);
vm.addIdNumbersModal.close;
vm.addIdNumbersModal.hide;
vm.addIdNumbersModal.hide;
}
These look like Bootstrap modal classes.
If so, then you can close them using JQuery (which is a dependency of bootstrap.js):
$('#addNumbersModal').modal('hide');