Popup

React Bootstrap 5 Popups

Responsive React Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.

Modal popups

Click the button to launch the popup. If you are looking for more popups like this check out our main Modal docs. 

import React, { useState } from "react";
import {
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from "mdb-react-ui-kit";

export default function Modal() {
  const [basicModal, setBasicModal] = useState(false);

  const toggleShow = () => setBasicModal(!basicModal);

  return (
    <>
      <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
      <MDBModal show={basicModal} setShow={setBasicModal} tabIndex="-1">
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn
                className="btn-close"
                color="none"
                onClick={toggleShow}
              ></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>...</MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color="secondary" onClick={toggleShow}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

Alert popups

Click the buttons to launch the alert popups. If you are looking for more popups like these check out our main Alerts docs.

Note: This component requires MDBootstrap Pro package. 

import React, { useRef } from 'react';
import { MDBBtn, MDBAlert } from 'mdb-react-ui-kit';

export default function App() {
  const triggerItem = useRef(null);
  const triggerItem2 = useRef(null);
  const triggerItem3 = useRef(null);
  const triggerItem4 = useRef(null);
  const triggerItem5 = useRef(null);
  const triggerItem6 = useRef(null);
  const triggerItem7 = useRef(null);

  return (
    <>
      <MDBBtn className='m-1' ref={triggerItem}>
        Primary
      </MDBBtn>
      <MDBBtn color='secondary' className='m-1' ref={triggerItem2}>
        Secondary
      </MDBBtn>
      <MDBBtn color='success' className='m-1' ref={triggerItem3}>
        Success
      </MDBBtn>
      <MDBBtn color='danger' className='m-1' ref={triggerItem4}>
        Danger
      </MDBBtn>
      <MDBBtn color='warning' className='m-1' ref={triggerItem5}>
        Warning
      </MDBBtn>
      <MDBBtn color='light' className='m-1' ref={triggerItem6}>
        Light
      </MDBBtn>
      <MDBBtn color='dark' className='m-1' ref={triggerItem7}>
        Dark
      </MDBBtn>

      <MDBAlert
        color='primary'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem}
      >
        A simple primary alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>

      <MDBAlert
        color='secondary'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem2}
      >
        A simple secondary alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>

      <MDBAlert
        color='success'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem3}
      >
        A simple success alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>

      <MDBAlert
        color='danger'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem4}
      >
        A simple danger alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>

      <MDBAlert
        color='warning'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem5}
      >
        A simple warning alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>

      <MDBAlert
        color='light'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem6}
      >
        A simple light alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>

      <MDBAlert
        color='dark'
        autohide
        width={800}
        position='top-right'
        offset={50}
        delay={2000}
        appendToBody
        triggerRef={triggerItem7}
      >
        A simple dark alert with
        <a href='#' className='alert-link'>
          an example link
        </a>
        . Give it a click if you like.
      </MDBAlert>
    </>
  );
}

Notification message popups

Click the buttons to launch the notification message popups. If you are looking for more popups like these check out our main Toasts docs.

Note: This component requires MDBootstrap Pro package. 

import React, { useRef } from 'react';
import { MDBToast, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  const triggerItem = useRef(null);
  const triggerItem2 = useRef(null);
  const triggerItem3 = useRef(null);
  const triggerItem4 = useRef(null);
  const triggerItem5 = useRef(null);
  const triggerItem6 = useRef(null);
  const triggerItem7 = useRef(null);

  return (
    <>
      <MDBBtn className='m-1' ref={triggerItem}>
        Primary
      </MDBBtn>
      <MDBBtn color='secondary' className='m-1' ref={triggerItem2}>
        Secondary
      </MDBBtn>
      <MDBBtn color='success' className='m-1' ref={triggerItem3}>
        Success
      </MDBBtn>
      <MDBBtn color='danger' className='m-1' ref={triggerItem4}>
        Danger
      </MDBBtn>
      <MDBBtn color='warning' className='m-1' ref={triggerItem5}>
        Warning
      </MDBBtn>
      <MDBBtn color='light' className='m-1' ref={triggerItem6}>
        Light
      </MDBBtn>
      <MDBBtn color='dark' className='m-1' ref={triggerItem7}>
        Dark
      </MDBBtn>

      <MDBToast
        color='primary'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Primary Basic Example'
      />

      <MDBToast
        color='secondary'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem2}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Secondary Basic Example'
      />

      <MDBToast
        color='success'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem3}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Success Basic Example'
      />

      <MDBToast
        color='danger'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem4}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Danger Basic Example'
      />

      <MDBToast
        color='warning'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem5}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Warning Basic Example'
      />

      <MDBToast
        color='light'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem6}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Light Basic Example'
      />

      <MDBToast
        color='dark'
        autohide
        position='top-right'
        delay={2000}
        appendToBody
        triggerRef={triggerItem7}
        headerContent={
          <>
            <strong className='me-auto'>MDBootstrap</strong>
            <small>11 mins ago</small>
          </>
        }
        bodyContent='Dark Basic Example'
      />
    </>
  );
}

Lightbox gallery popup

Click the images to display a popup with image zoom. If you are looking for more popups like these check out our main Lightbox docs.

Note: This component requires MDBootstrap Pro package.

Table Full of Spices
Winter Landscape
View of the City in the Mountains 
import React from 'react';
import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBLightbox>
      <MDBRow>
        <MDBCol lg='4'>
          <MDBLightboxItem
            src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
            fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
            className='w-100'
          />
        </MDBCol>
        <MDBCol lg='4'>
          <MDBLightboxItem
            src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp'
            fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/2.webp'
            className='w-100'
          />
        </MDBCol>
        <MDBCol lg='4'>
          <MDBLightboxItem
            src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp'
            fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/3.webp'
            className='w-100'
          />
        </MDBCol>
      </MDBRow>
    </MDBLightbox>
  );
}