Modals
Pre-built modals for copygen panel.
Custom modals
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
import Link from 'next/link';
import { useState } from 'react';
import { Button, Col, Modal, Row } from 'react-bootstrap';
import Icon from '../Icon';
export default function CancelSubscriptionModal({btnVariant}) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant={btnVariant} onClick={handleShow}>
Cancel Subscription
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Body>
<div className="modal-body p-4">
<div className="media media-rg media-middle media-circle text-danger bg-danger bg-opacity-20 mb-3">
<Icon icon="spark-fill" className="icon" />
</div>
<h2 className="h1">Cancel Subscription</h2>
<p>
Are you sure you want to cancel your subscription? Your paid plan
is valid till <span className="text-dark">23 Mar, 2023</span>.
</p>
<p>
Don't forget to review our other{' '}
<Link href="/pricing-plans">pricing plans</Link> before cancelling
your current subscription. If you still want to cancel, your
account will change to a free plan.
</p>
<div className="card bg-lighter bg-opacity-80 shadow-none mt-2">
<div className="card-body">
<h5>What you will lose after cancelling you subscription?</h5>
<ul className="list-dot gap gy-2 mt-2">
<li>All your generated in Copygen will be removed.</li>
<li>You will lose access to unlimited content generation.</li>
<li>
You will get regular updates exclusive only for our premium
users.
</li>
<li>
Server response may become slow as we highly prioritized our
premium users.
</li>
<li>
There will be no recovery options once you cancel
subscription.
</li>
</ul>
</div>
</div>
<Row className="gx-4 mt-4">
<Col sm="6">
<Button variant="outline-light w-100" onClick={handleClose}>
Keep Plan
</Button>
</Col>
<Col sm="6">
<Link href="/pricing-plans" className="btn btn-danger w-100">
I Understand, Cancel
</Link>
</Col>
</Row>
</div>
</Modal.Body>
</Modal>
</>
);
}
import Link from 'next/link';
import { useState } from 'react';
import { Button, Col, Modal, Row } from 'react-bootstrap';
import Icon from '../Icon';
export default function ChangePlanModal({btnVariant}) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Change Plan
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Body>
<div className="p-4">
<div className="media media-rg media-middle media-circle text-primary bg-primary bg-opacity-20 mb-3">
<Icon icon="spark-fill" className="icon" />
</div>
<h2 className="h1">Change Subscription</h2>
<p>
Are you sure you want to change your subscription? Your paid plan
is valid till <span className="text-dark">23 Mar, 2023</span>.
</p>
<div className="card bg-lighter bg-opacity-80 shadow-none mt-2">
<div className="card-body">
<h5>
What you will lose after changing your active subscription?
</h5>
<ul className="list-dot gap gy-2 mt-2">
<li>You won’t have a dedicated account manager</li>
<li>
No custom tools will be existed for AI content generations.
</li>
<li>You’ll lose access to advance integrations.</li>
<li>No prioritized support will be provided for you.</li>
<li>Server response rate will be standard than faster.</li>
<li>
Regular model updates instead of special features early
access.
</li>
</ul>
</div>
</div>
<Row className="gx-4 mt-4">
<Col sm="6">
<Button variant="outline-light w-100" onClick={handleClose}>
Keep Plan
</Button>
</Col>
<Col sm="6">
<Link href="/pricing-plans" className="btn btn-primary w-100">
Change Plan
</Link>
</Col>
</Row>
</div>
</Modal.Body>
</Modal>
</>
);
}
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
import Icon from '../Icon';
export default function SuccessModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Success Modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Body>
<div className="p-5 text-center">
<div className="media media-huge media-middle media-circle text-primary bg-primary bg-opacity-20 mb-3">
<Icon icon="check" className="icon" />
</div>
<h2 className="h1">Thank You</h2>
<p>
We truly appreciate your input, as it will help us improve our
products and services for our customers.
</p>
<div className="mt-4">
<Button variant="primary w-100" onClick={handleClose}>
Close
</Button>
</div>
</div>
</Modal.Body>
</Modal>
</>
);
}
import Link from 'next/link';
import { useState } from 'react';
import { Button, Col, Modal, Row } from 'react-bootstrap';
import Icon from '../Icon';
export default function FeedbackModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Feedback Modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Body>
<div className="p-4">
<div className="media media-rg media-middle media-circle text-primary bg-primary bg-opacity-20 mb-3">
<em className="icon ni ni-chat-fill" />
</div>
<h2 className="h1">We’d like your feedback</h2>
<p>
We truly appreciate your input, as it will help us improve our
products and services for our customers.
</p>
<Row className="row gy-4 gx-4">
<Col sm="12">
<div className="form-group">
<label className="form-label">Please choose a issue</label>
<div className="form-control-wrap">
<select className="form-select">
<option selected>I have a question</option>
<option>I need support</option>
</select>
</div>
</div>
</Col>
<Col sm="12">
<div className="form-group">
<label className="form-label">Describe your feedback</label>
<div className="form-control-wrap">
<textarea
cols={30}
rows={5}
className="form-control"
placeholder="Start writing here..."
/>
</div>
<div className="form-note d-flex justify-content-end">
<span>0/500 Characters</span>
</div>
</div>
</Col>
</Row>
<Row className="gx-4 mt-4">
<Col sm="6">
<Button variant="outline-light w-100" onClick={handleClose}>
Close
</Button>
</Col>
<Col sm="6">
<Button variant="primary w-100">Submit</Button>
</Col>
</Row>
</div>
</Modal.Body>
</Modal>
</>
);
}
Examples
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
'use client';
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function DefaultModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
'use client';
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function StaticBackdropModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch static backdrop modal
</Button>
<Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
I will not close if you click outside me. Do not even try to press
escape key.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
</>
);
}
Vertical Alignment
Add .modal-dialog-top, .modal-dialog-bottom to .modal-dialog to vertically center the modal.
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function VerticallyTopModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Vertically Top
</Button>
<Modal show={show} onHide={handleClose} dialogClassName="modal-dialog-top">
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function VerticallyBottomModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Vertically Bottom
</Button>
<Modal show={show} onHide={handleClose} dialogClassName="modal-dialog-bottom">
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you are reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Optional sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function ExtraLargeModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Extra Large Modal
</Button>
<Modal show={show} onHide={handleClose} dialogClassName="modal-xl">
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id
voluptatem fugiat autem sequi, rem modi earum provident eos corrupti.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function LargeModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Large Modal
</Button>
<Modal show={show} onHide={handleClose} dialogClassName="modal-lg">
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id
voluptatem fugiat autem sequi, rem modi earum provident eos corrupti.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function SmallModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Small Modal
</Button>
<Modal show={show} onHide={handleClose} dialogClassName="modal-sm">
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id
voluptatem fugiat autem sequi.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function FullModal() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Full Modal
</Button>
<Modal
show={show}
onHide={handleClose}
dialogClassName="modal-fullscreen"
>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id
voluptatem fugiat autem sequi, rem modi earum provident eos corrupti.
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function FullScreenBelowSm() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Full Screen Below sm
</Button>
<Modal
show={show}
onHide={handleClose}
dialogClassName="modal-fullscreen-sm-down"
>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id
voluptatem fugiat autem sequi, rem modi earum provident eos corrupti.
</Modal.Body>
</Modal>
</>
);
}
import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
export default function FullScreenBellowMd() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Full Screen Bellow md
</Button>
<Modal
show={show}
onHide={handleClose}
dialogClassName="modal-fullscreen-md-down"
>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id
voluptatem fugiat autem sequi, rem modi earum provident eos corrupti.
</Modal.Body>
</Modal>
</>
);
}