xxxxxxxxxx
import React from 'react'
import { Modal, Button } from 'react-bootstrap'
function ModalDialog() {
const [isShow, invokeModal] = React.useState(false)
const initModal = () => {
return invokeModal(!false)
}
return (
<>
<Button variant="success" onClick={initModal}>
Open Modal
</Button>
<Modal show={isShow}>
<Modal.Header closeButton onClick={initModal}>
<Modal.Title>React Modal Popover Example</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Modal.Body>
<Modal.Footer>
<Button variant="danger" onClick={initModal}>
Close
</Button>
<Button variant="dark" onClick={initModal}>
Store
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default ModalDialog
xxxxxxxxxx
//code example
//https://codesandbox.io/s/react-bootstrap-modal-example-kf9602
import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/js/dist/modal";
const MyComponent = () => {
return (
<div className="d-flex justify-content-center">
{/* Button trigger modal */}
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
{/* Modal */}
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Modal title
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Place your content here</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
};
const App = () => {
return (
<div>
<MyComponent />
</div>
);
};
export default App;