There's times where you need to alert something to your visitor, maybe you want to warn them before they delete a record. You could use the build in browser's alert method, but that doesn't follow your branding does it?
This alert plugin creates a nice wrapper around the modal plugin already present, with the ability for multiple 'types' and cancel/confirm events, the alert plugin is a great addition to any website.
If you do not need a cancel button, remove the option to set the cancel text!
Creating an alert dialog is as easy as creating any other plugin instance within BulmaJS.
Bulma.create('alert', {
type: 'danger',
title: 'This is an alert!',
body: 'Ooohh what button you gonna click?',
confirm: 'Confirm it!',
cancel: 'Maybe not'
});
Whether you're just informing your user of something, showing them a success message or alerting them to a problem, the alert plugin has you covered. Simply set the type option to danger, warning, success or info to change the look of the alert modal.
document.querySelector('#example-alert-button-2').addEventListener('click', function(e) {
Bulma.create('alert', {
type: 'info',
title: 'This is an alert!',
body: 'Ooohh what button you gonna click?',
confirm: 'Confirm it!',
cancel: 'Maybe not'
});
});
document.querySelector('#example-alert-button-3').addEventListener('click', function(e) {
Bulma.create('alert', {
type: 'success',
title: 'This is an alert!',
body: 'Ooohh what button you gonna click?',
confirm: 'Confirm it!',
cancel: 'Maybe not'
});
});
document.querySelector('#example-alert-button-4').addEventListener('click', function(e) {
Bulma.create('alert', {
type: 'warning',
title: 'This is an alert!',
body: 'Ooohh what button you gonna click?',
confirm: 'Confirm it!',
cancel: 'Maybe not'
});
});
document.querySelector('#example-alert-button-5').addEventListener('click', function(e) {
Bulma.create('alert', {
type: 'danger',
title: 'This is an alert!',
body: 'Ooohh what button you gonna click?',
confirm: 'Confirm it!',
cancel: 'Maybe not'
});
});
What's the point in a popup if you can't use it for input? You can specify an onClick handler function for both the confirm and cancel buttons by providing the onClick property.
Bulma.create('alert', {
type: 'danger',
title: 'This is an alert!',
body: 'Ooohh what button you gonna click?',
confirm: {
label: 'Confirm!',
onClick: function() {
Bulma.create('alert', {
title: 'Confirmed',
body: 'You clicked confirm!'
});
},
},
cancel: {
label: 'Cancel!',
onClick: function() {
Bulma.create('alert', {
title: 'Cancelled',
body: 'You clicked cancel!'
});
}
}
});
If you would like to adjust the style of the buttons, maybe changing them to include the is-outlined class you can do so by providing the cancel or confirm options with an object. The new object will have label property, this will the text to display within the button, and an array of classes.
Bulma.create('alert', {
type: 'danger',
title: 'Ooooo custom',
body: 'Classes...',
confirm: {
label: 'Awesome',
classes: ['is-outlined']
},
cancel: {
label: 'See',
classes: ['is-primary', 'is-rounded']
}
});
You can choose to not show the alert's header by setting the showHeader option to false.
.alert {
border-radius: 6px 6px 0 0;
}
Bulma.create('alert', {
type: 'danger',
body: 'See no header',
confirm: 'Awesome!',
showHeader: false
});
The Alert plugin is a wrapper around the Modal plugin. This means if you pass closable: true it'll enable the closing features that Modals have. This includes a close button being added in the corner, the ability to close the modal when clicking outside and the ability to close the modal when pressing the ESC key.
By default the alert will destroy itself when closed, removing all HTML and nulling it's variables. You may not want to use this behaviour.
You can specify if a button closes and/or destroys the alert instance by specifying the close or destroy properties to the confirm or close objects.
Bulma.create('alert', {
type: 'danger',
title: 'Alert',
body: 'Try clicking the buttons!',
confirm: {
label: 'Close but do not destroy',
destroy: false
},
cancel: {
label: 'Do nothing!',
close: false,
destroy: false
}
});
If you save the alert instance to a variable, you can then show it again using it's show method.