Modal & Closes

export default function BasicModal () {   
    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 as="h6">Modal title</Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
    <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>
        Close
    </Button>
    <Button variant="primary" onClick={handleClose}>
        Save Changes
    </Button>
    </Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [show1, setShow1] = useState(false)

const handleClose1 = () => setShow1(false)
const handleShow1 = () => setShow1(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. Don 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>
)}

export default function BasicModal () {   
const [show1, setShow1] = useState(false)

const handleClose1 = () => setShow1(false)
const handleShow1 = () => setShow1(true)
return(
    <Button variant='primary' type="button" className="btn btn-primary" onClick={handleShow2}>
    Scrolling long content
    </Button>
    <Modal show={show2} onHide={handleClose2} backdrop="static" keyboard={false}>
        <Modal.Header closeButton>
        <Modal.Title as="h6">Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                        Libero
                        ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
                        nisi
                        ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea
                        voluptatibus, ipsam quo est rerum modi quos expedita facere,
                        ex
                        tempore fuga similique ipsa blanditiis et accusamus
                        temporibus
                        commodi voluptas! Nobis veniam illo architecto expedita quam
                        ratione quaerat omnis. In, recusandae eos! Pariatur,
                        deleniti
                        quis ad nemo ipsam officia temporibus, doloribus fuga
                        asperiores
                        ratione distinctio velit alias hic modi praesentium aperiam
                        officiis eaque, accusamus aut. Accusantium assumenda,
                        commodi
                        nulla provident asperiores fugit inventore iste amet aut
                        placeat
                        consequatur reprehenderit. Ratione tenetur eligendi, quis
                        aperiam dolores magni iusto distinctio voluptatibus minus a
                        unde
                        at! Consequatur voluptatum in eaque obcaecati, impedit
                        accusantium ea soluta, excepturi, quasi quia commodi
                        blanditiis?
                        Qui blanditiis iusto corrupti necessitatibus dolorem fugiat
                        consequuntur quod quo veniam? Labore dignissimos reiciendis
                        accusamus recusandae est consequuntur iure.</p>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <p>Lorem ipsum dolor sit amet.</p>
        </Modal.Body>
        <Modal.Footer>
        <Button variant="secondary" onClick={handleClose2}>
            Close
        </Button>
        <Button variant="primary">Understood</Button>
        </Modal.Footer>
    </Modal>
)}

export default function BasicModal () {   
const [modalShow, setModalShow] = useState(false);
return(
<Button type="button" className="btn btn-primary" 
onClick={() => setModalShow(true)}">
    Vertically centered modal
</Button>
<Modal centered show={modalShow} onHide={() => setModalShow(false)} 
keyboard={false} className="modal fade">
<Modal.Header closeButton>
<Modal.Title as="h6">Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
 nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setModalShow(false)}>
    Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [modalShow, setModalShow] = useState(false);
return(
<Button type="button" className="btn btn-primary" 
onClick={() => setModalShow(true)}">
    Vertically centered modal
</Button>
<Modal centered show={modalShow} onHide={() => setModalShow(false)} 
keyboard={false} className="modal fade">
<Modal.Header closeButton>
<Modal.Title as="h6">Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
 Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae
 nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setModalShow(false)}>
    Close
</Button>
<Button variant="primary">Understood</Button>
</Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [show3, setShow3] = useState(false);
const handleClose3 = () => setShow3(false);
const handleShow3 = () => setShow3(true);
return(
<Button variant='primary' type="button" className="" onClick={handleShow3}>
Launch demo modal</Button>
<Modal show={show3} onHide={handleClose3} centered className='popover-modal'>
<Modal.Header closeButton>
<Modal.Title as="h6"> Modal title</Modal.Title>
</Modal.Header>
<Modal.Body> <h5>Popover in a modal</h5>
<p> This
    <OverlayTrigger trigger="click"
    placement='right'
    // autoclose='true'
    overlay={
        <Popover placement='bottom'>
        <Popover.Header> Popover bottom</Popover.Header>
        <Popover.Body>
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
        </Popover.Body>
        </Popover>
    }>
    <Button variant="secondary" className="me-2 ms-2">button</Button>
    </OverlayTrigger>
    triggers a popover on click.
</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose3}>
    Close
</Button>
<Button variant="primary">
    Save Changes
</Button>
</Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [modalShow2, setModalShow2] = useState(false)
return(
<Button variant='primary' type="button" className="" onClick={handleShow3}>
Launch demo modal</Button>
<Modal show={modalShow2} onHide={() => setModalShow2(false)} centered>
 <Modal.Header closeButton>
 <Modal.Title as="h6"> Modal title</Modal.Title>
 </Modal.Header>
 <Modal.Body> 
     <Container fluid>
<Row>
    <Col md={4} className=" bg-light border">.col-md-4</Col>
    <Col md={4} className=" ms-auto bg-light border">.col-md-4
        .ms-auto</Col>
</Row>
<Row className="row mt-3">
    <Col md={3} className=" ms-auto bg-light border">.col-md-3
        .ms-auto</Col>
    <Col md={2} className=" ms-auto bg-light border">.col-md-2
        .ms-auto</Col>
</Row>
<Row className="row mt-3">
    <Col md={6} className=" ms-auto bg-light border">.col-md-6
        .ms-auto</Col>
</Row>
<Row className="row mt-3">
    <Col sm={9} className=" bg-light border">
        Level 1: .col-sm-9
        <Row>
<Col sm={6} className="col-8 bg-light border">
        Level 2: .col-8 .col-sm-6
</Col>
<Col sm={6} className="col-4 bg-light border">
     Level 2: .col-4 .col-sm-6
                         </Col>
                     </Row>
                 </Col>
             </Row>
         </Container>
 </Modal.Body>
 <Modal.Footer>
 <Button variant="secondary" onClick={() => setModalShow2(false)}>
     Close
 </Button>
 <Button variant="primary">
     Save Changes
 </Button>
 </Modal.Footer>
</Modal>
)}

export default function BasicModal () {   
const [show3, setShow3] = useState(false);
const handleClose3 = () => setShow3(false);
const handleShow3 = () => setShow3(true);  //  Twomodals
const [showt1, setShowt1] = useState(false)
const [showt2, setShowt2] = useState(false)
const handleCloset1 = () => setShowt1(false)
const handleShowt1 = () => setShowt1(true)
const handleCloset2 = () => setShowt2(false)
const handleShowt2 = () => setShowt2(true)

const Handleclose1 = () => {
  setShowt1(false)
  setShowt2(true)
}
const Handleclose2 = () => {
  setShowt2(false)
  setShowt1(true)
}
return(
    <Button variant='primary' className="btn" onClick={handleShowt1}>Open first modal
    </Button>
    <Modal id="m1" className="fade" aria-hidden="true"
    aria-labelledby="contained-modal-title-vcenter" centered show={showt1} onHide={handleCloset1} >
    <Modal.Header closeButton>
        <Modal.Title id="exampleModalToggleLabel">Modal 1</Modal.Title>

    </Modal.Header>
    <Modal.Body>
        Show a second modal and hide this one with the button below. </Modal.Body>
    <Modal.Footer>
        <Button className="btn btn-primary" id="btn1" onClick={Handleclose1}>Open second modal</Button>
    </Modal.Footer>

    </Modal>

    <Modal id="m2" className='fade' aria-labelledby="contained-modal-title-vcenter"
    centered show={showt2} onHide={handleCloset2}>
    <Modal.Header closeButton>
        <Modal.Title>Modal 2</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        Hide this modal and show the first with the button below.</Modal.Body>
    <Modal.Footer>
        <Button className="btn btn-primary"
        onClick={Handleclose2}>Back to first</Button>
    </Modal.Footer>

    </Modal>
)}

export default function BasicModal () {   
// small modal
const [smShow, setSmShow] = useState(false);

//large modal
const [lgShow, setLgShow] = useState(false);

//large modal
const [xlShow, setXlShow] = useState(false);
return(
    <Modal size="xl" show={xlShow} onHide={() => setXlShow(false)}
    aria-labelledby="example-modal-sizes-title-sm">
    <Modal.Header closeButton>
    <Modal.Title as="h6" id="example-modal-sizes-title-sm">
        Extra large Modal
    </Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
</Modal>
<Modal size="lg" show={lgShow} onHide={() => 
setLgShow(false)}aria-labelledby="example-modal-sizes-title-lg">
    <Modal.Header closeButton>
    <Modal.Title as="h6" id="example-modal-sizes-title-lg">
        Large Modal
    </Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
</Modal>
<Modal size="sm" show={smShow} onHide={() => setSmShow(false)}
    aria-labelledby="example-modal-sizes-title-sm">
    <Modal.Header closeButton>
    <Modal.Title as="h6" id="example-modal-sizes-title-sm">
        Small Modal
    </Modal.Title>
    </Modal.Header>
    <Modal.Body>...</Modal.Body>
</Modal>
)}

export default function BasicModal () {   
  //fullscreen modals
  const values =  [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down',];
  const colors = ['primary', 'secondary', 'warning', 'info', 'success', 'danger'];
  const [fullscreen, setFullscreen] = useState<any>(true);
  const [showf, setShowf] = useState(false);

  function handleShowf(breakpoint:any, color:any) {
    setFullscreen(breakpoint);
    setShowf(true);
  }
return(
    {values.map((v, idx) => (
        <Button
        key={idx}
        onClick={() => handleShowf(v, colors[idx % colors.length])}
        >
        </Button>
    ))}
    <Modal show={showf} fullscreen={fullscreen} onHide={() => setShowf(false)}>
        <Modal.Header closeButton>
        <Modal.Title>Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body content</Modal.Body>
    </Modal>
)}

export default function BasicModal () {   
const [show6, setShow6] = useState(false);

const handleClose6 = () => setShow6(false);
const handleShow6 = () => setShow6(true);
return(
<Button variant='light' type="button" 
className="btn btn-light mb-1" onClick={handleShow6}>Open modal for
@getbootstrap</Button>
<Modal show={show6} onHide={handleClose6}>
        <Modal.Header closeButton>
        <Modal.Title as="h6>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
        <Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Recipient:</Form.Label>
<Form.Control
    type="email"
    placeholder=" @getbootstrap"
    autoFocus
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="exampleForm.ControlTextarea1">
<Form.Label>Message:</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose6}>
    Close
</Button>
<Button variant="primary">Send message</Button>
</Modal.Footer>
</Modal>
)}

<pre className="language-html"><code className="language-html">&lt;div className="row "&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-scale" data-bs-toggle="modal" href="#modaldemo8"&gt;Scale&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-slide-in-right" data-bs-toggle="modal" href="#modaldemo8"&gt;Slide In Right&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-slide-in-bottom" data-bs-toggle="modal" href="#modaldemo8"&gt;Slide In Bottom&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-newspaper" data-bs-toggle="modal" href="#modaldemo8"&gt;Newspaper&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-fall" data-bs-toggle="modal" href="#modaldemo8"&gt;Fall&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-flip-horizontal" data-bs-toggle="modal" href="#modaldemo8"&gt;Flip Horizontal&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-flip-vertical" data-bs-toggle="modal" href="#modaldemo8"&gt;Flip Vertical&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-super-scaled" data-bs-toggle="modal" href="#modaldemo8"&gt;Super Scaled&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-sign" data-bs-toggle="modal" href="#modaldemo8"&gt;Sign&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-rotate-bottom" data-bs-toggle="modal" href="#modaldemo8"&gt;Rotate Bottom&lt;/a&gt;
    &lt;/div&gt;
    &lt;div className="col-sm-6 col-md-4 col-xl-3"&gt;
        &lt;a className="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-rotate-left" data-bs-toggle="modal" href="#modaldemo8"&gt;Rotate Left&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div className="modal fade"  id="modaldemo8"&gt;
    &lt;div className="modal-dialog modal-dialog-centered text-center" role="document"&gt;
        &lt;div className="modal-content modal-content-demo"&gt;
            &lt;div className="modal-header"&gt;
                &lt;h6 className="modal-title"&gt;Message Preview&lt;/h6&gt;&lt;button aria-label="Close" className="btn-close" data-bs-dismiss="modal"&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;div className="modal-body text-start"&gt;
                &lt;h6&gt;Why We Use Electoral College, Not Popular Vote&lt;/h6&gt;
                &lt;p className="text-muted mb-0"&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className="modal-footer"&gt;
                &lt;button className="btn btn-primary" &gt;Save changes&lt;/button&gt; &lt;button className="btn btn-light" data-bs-dismiss="modal" &gt;Close&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

<Button variant='' type="button" 
className="btn-close" aria-label="Close"></Button>

<Button variant='' type="button"
 className="btn-close" disabled aria-label="Close"></Button>