Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-modal-backdrop

React Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more. https://mdbootstrap.com/docs/react/extended/modal-backdrop/
https://github.com/mdbootstrap/react-modal-backdrop

backdrop bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js modal react

Last synced: 3 months ago
JSON representation

React Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more. https://mdbootstrap.com/docs/react/extended/modal-backdrop/

Awesome Lists containing this project

README 

          
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



React Backdrop options for a responsive popup with Bootstrap 5. Prevent close on click outside with static backdrop, remove backdrop, enable interactivity & more.



Check out [React Modal Backdrop Documentation](https://mdbootstrap.com/docs/react/extended/modal-backdrop/) for detailed instructions & even more examples.



## Basic example

![Basic example](https://user-images.githubusercontent.com/108793661/187642850-55d7bb88-edfc-4f3d-8bbe-6dd4254d7e68.png)

```js

import React, { useState } from 'react';

import {

  MDBBtn,

  MDBModal,

  MDBModalDialog,

  MDBModalContent,

  MDBModalHeader,

  MDBModalTitle,

  MDBModalBody,

  MDBModalFooter,

} from 'mdb-react-ui-kit';



export default function App() {

  const [basicModal, setBasicModal] = useState(false);



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



  return (

    <>

      LAUNCH DEMO MODAL

      

        

          

            

              Modal title

              

            

            ...



            

              

                Close

              

              Save changes

            

          

        

      

    >

  );

}

```



## How to use?



1. Download MDB 5 - FREE REACT UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More examples(click on the image to see a live demo)

### Static Backdrop:

[![React Modal Backdrop #1](https://user-images.githubusercontent.com/108793661/187642457-41b637c5-2b13-435c-b25f-e45da6ebbce7.png)](https://mdbootstrap.com/docs/react/extended/modal-backdrop/#section-static)



### No Backdrop:

[![React Modal Backdrop #2](https://user-images.githubusercontent.com/108793661/187642630-a43a45bc-2328-4326-a8c5-a7a56f9063c5.png)](https://mdbootstrap.com/docs/react/extended/modal-backdrop/#section-no-backdrop)



You can find other examples [here](https://mdbootstrap.com/docs/react/extended/modal-backdrop).



## More extended React documentation