https://github.com/blikblum/nextbone-modals
Modals implementation for Nextbone
https://github.com/blikblum/nextbone-modals
bootstrap modals nextbone
Last synced: 6 months ago
JSON representation
Modals implementation for Nextbone
- Host: GitHub
- URL: https://github.com/blikblum/nextbone-modals
- Owner: blikblum
- License: isc
- Created: 2019-01-18T14:35:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-19T01:04:24.000Z (about 2 years ago)
- Last Synced: 2025-01-23T12:46:59.554Z (over 1 year ago)
- Topics: bootstrap, modals, nextbone
- Language: JavaScript
- Homepage: https://blikblum.github.io/nextbone-modals/example/dist/
- Size: 9.16 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Nextbone Modals
Simple modal service for Nextbone.
See [live example](https://blikblum.github.io/nextbone-modals/example/dist/) with Bootstrap
## Usage
### Bootstrap
```js
import { BootstrapModals } from 'nextbone-modals';
// optional. Configure default button captions
BootstrapModals.setCaptions({
ok: 'OK',
cancel: 'Cancel',
yes: 'Yes',
no: 'No'
});
// optional. Configure default options
BootstrapModals.setOptions({
centered: true,
customClass: 'my-modal-class'
});
const modalService = new BootstrapModals();
modalService.setup({
container: '#modal-container'
});
modalService.alert({
title: 'Here is a alert modal!',
text: 'Here is some text to demo that you can pass anything to your view'
}).then(() => {
console.log('Yay! The alert has been closed!');
});
modalService.confirm({
title: 'Here is a confirm modal!',
text: 'Here is some text to demo that you can pass anything to your view'
}).then(confirmed => {
if (confirmed) {
console.log('Yay! The user confirmed!');
} else {
console.log('Boo! The user cancelled!');
}
});
modalService.prompt({
title: 'Here is a prompt modal!',
text: 'Here is some text to demo that you can pass anything to your view'
}).then(response => {
if (response) {
console.log('Yay! The user wrote a response!');
} else {
console.log('Boo! The user cancelled!');
}
});
// see a full example ar ./example
```
### Custom implementation
```js
import $ from 'jquery'
import { Modals } from 'nextbone-modals';
import AlertView from './views/alert';
import ConfirmView from './views/confirm';
import PromptView from './views/prompt';
customElements.define('nextbone-modal-alert', AlertView);
customElements.define('nextbone-modal-confirm', ConfirmView);
customElements.define('nextbone-modal-prompt', PromptView);
class MyModalService extends Modals {
initialize() {
this.$el = $('
').appendTo(document.body);
},
render(view) {
this.$el.append(view);
},
remove(view) {
view.$el.remove();
},
animateIn(view) {
return new Promise(resolve => {
$(view).fadeIn(300, resolve);
this.$el.fadeIn(300, resolve);
});
},
animateOut(view) {
return new Promise(resolve => {
$(view).fadeOut(300, resolve);
this.$el.fadeOut(300, resolve);
});
},
animateSwap(oldView, newView) {
oldView.$el.hide();
newView.$el.show();
}
};
const modalService = new ModalService();
// same usage as bootstrap
```
## Contributing
### Getting Started
[Fork](https://help.github.com/articles/fork-a-repo/) and
[clone](http://git-scm.com/docs/git-clone) this repo.
```
npm install
```
### Running Tests
```
npm test
```
===
© 2015 James Kyle. Distributed under ISC license.
© 2019 Luiz Américo