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.