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

https://github.com/mdbootstrap/bootstrap-popup

Responsive Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.
https://github.com/mdbootstrap/bootstrap-popup

bootstrap bootstrap-template bootstrap5 notification-popups popup popup-alert popup-modal template

Last synced: 12 months ago
JSON representation

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

Awesome Lists containing this project

README

          

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

Check out [Bootstrap Popup Documentation](https://mdbootstrap.com/docs/standard/extended/popup/) for detailed instructions & even more examples.

## Modal popups

Click the button to launch the popup. If you are looking for more popups like this check out our main [Modal docs](https://mdbootstrap.com/docs/standard/components/modal/) as well as our [Modal generator](https://mdbootstrap.com/docs/standard/tools/builders/modals/).

```html

Launch demo modal


```
## 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](https://mdbootstrap.com/docs/standard/components/alerts/) as well as our [Modal generator](https://mdbootstrap.com/docs/standard/tools/builders/alerts/).

```html

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark


A simple primary alert with
an example link. Give it a click if you like.


A simple secondary alert with
an example link. Give it a click if you like.


A simple success alert with
an example link. Give it a click if you like.


A simple danger alert with
an example link. Give it a click if you like.


A simple warning alert with
an example link. Give it a click if you like.


A simple info alert with
an example link. Give it a click if you like.


A simple light alert with
an example link. Give it a click if you like.


A simple dark alert with
an example link. Give it a click if you like.

```

```javascript
const triggers = [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
];
const basicInstances = [
'alert-primary',
'alert-secondary',
'alert-success',
'alert-danger',
'alert-warning',
'alert-info',
'alert-light',
'alert-dark',
];

triggers.forEach((trigger, index) => {
let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
document.getElementById(trigger).addEventListener('click', () => {
basicInstance.show();
});
});
```

## How to use?

1. Download MDB 5 - free 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 extended Bootstrap documentation