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
Related
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.
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.
I'm using react modal, and the modal will not close upon clicking the overlay. I provide props to both isOpen and onRequestClose, but the modal remains open.
closeModal= () => {
this.setState({ modalIsOpen: false });
};
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
shouldCloseOnOverlayClick={true}
>
<div>This is my Modal</div>
<Button onClick={this.closeModal}>Close Modal<Button>
</Modal>
I know this has been an issue in the past. Is there anything else I can try? Thank you in advance.
This issue is fixed in versiion 2.2.2.
If you have easy mode for using modal with react, for me is the best away is insert from template index.html in my case it is file in public folder CDN links for bootstrap and jQuery and than make folder for Modal there make two file: index.js and modal.js.
In first is code `import React from 'react';
import MOdal from'./pomocna_modal';
class Modal_gl extends React.Component{
promena(){
alert('alert');
}
render(){
const user={
id: 0,
name:"Naslov modala prvog",
title: "Telo modala jedan",
};
return(
<div>
<button type="button" className="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal" onClick={this.promena}
ref="prvoDugme">
Launch demo modal
</button>
<button type="button" className="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal"
ref="drugoDugme">
Drugi poziv istog modala sa promenjenim podacima
</button>
<MOdal titlem={this.props.title} modalb={this.props.name} user={user} />
</div>
);
}
}
export default Modal_gl;
In second code is
/**
* Created by trika on 19-Jan-18.
*/
import React from 'react';
class Modal extends React.Component{
render() {
console.log(this.props);
return (
<div className="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 className="modal-title" id="myModalLabel">{this.props.user.name}</h4>
</div>
<div className="modal-body">
{this.props.user.title}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
);
}
};
export default Modal;
for calling modal You must use bootstrap code between html tags from where you wish calling Modal like this data-toggle="modal" data-target="#myModal"
From docs you can see this:
By default the modal is closed when clicking outside of it (the
overlay area). If you want to prevent this behavior you can pass the
'shouldCloseOnOverlayClick' prop with 'false' value.
Your code looks fine, maybe the issue is with the version you're using, might have an issue with shouldCloseOnOverlayClick prop. Try without adding the prop, and also check your react-modal version.
I am working on a script where a modal opens up only after the output from python file says dup_yes is 1
I have the modal as following:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dupModal" data-keyboard="false" data-backdrop="static" ng-click="save_me()" >Save Me</button>
<div class="modal fade" id="dupModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-alert">Same name already exists</h3>
<h6 class="modal-ask">Save both entries or do you want to cancel?</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Keep Both</button>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true" >Close</button>
</div>
</div>
</div>
</div>
and my script is as follows:
$scope.save_me = function () {
http.get("path to python file").then(function(response){
$scope.check=response.data;
if ($scope.check['login_status'] == 1 ){
console.log("Mission is a Success\n");
$scope.dup_yes=1;
}
})
}
When I click on button it opens up the modal and runs the python file simultaneously.
Instead I want it to open up the modal only when my python script gives the value 1.
Any ideas on how to do this?
You can access the modal from the controller and open it like this:
$scope.save_me = function () {
http.get("path to python file").then(function(response){
$scope.check=response.data;
if ($scope.check['login_status'] == 1 ){
console.log("Mission is a Success\n");
$scope.dup_yes=1;
var modal = angular.element('#dupModal');
//modal.modal('hide');
modal.modal('show');
}
})
}
Mayby a better solution is to handle the modal action in a separete controller and inject that into your current controller to keep the responsibilities separate