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.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-popup
Owner: mdbootstrap
License: mit
Created: 2022-06-13T13:47:29.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2022-06-15T10:14:59.000Z (almost 4 years ago)
Last Synced: 2025-04-21T09:06:26.122Z (about 1 year ago)
Topics: bootstrap, bootstrap-template, bootstrap5, notification-popups, popup, popup-alert, popup-modal, template
Language: SCSS
Homepage: https://mdbootstrap.com/docs/standard/extended/popup/
Size: 940 KB
Stars: 0
Watchers: 4
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

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