Bulma provides a very versatile modal component. The problem? Modals need Javascript! BulmaJS makes this quick and easy to set up.
The first step is to create the modal instance. Due to the nature of a modal, it will always need some form of Javascript. Due to this, there is no HTML only way of creating a modal instance. However, you can only use Javascript if this suits your project.
The modal plugin provides two ways to create a new modal. Either entirely through Javascript, using this method all HTML will be dynamically created or with a mixture of HTML and Javascript.
var modal = Bulma.create('modal', {
root: document.getElementById('modal-example-1'),
title: 'Modal title 1',
body: '<p class="image is-4by3"><img src="https://bulma.io/images/placeholders/1280x960.png" alt=""></p>',
buttons: [
{
label: 'Save changes',
classes: ['button', 'is-success'],
onClick: function() { alert('Save button pressed'); }
},
{
label: 'Close',
classes: ['button', 'is-danger', 'is-outline'],
onClick: function() { alert('Close button pressed'); }
}
]
});
Modal title 1
<button id="example-modal-button-2" class="button is-primary">Toggle modal</button>
<div id="modal-example-2" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title 1</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="image is-4by3"><img src="https://bulma.io/images/placeholders/1280x960.png" alt=""></p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button is-danger is-outline">Cancel</button>
</footer>
</div>
</div>
<script>
document.querySelector('#example-modal-button-2').addEventListener('click', function(e) {
var modalTwo = Bulma.create('modal', {
element: document.querySelector('#modal-example-2')
});
modalTwo.open();
});
</script>
You want to show your modal right? With BulmaJS that's as easy as calling open()
on your modal Javascript instance. You can call the reverse close()
method to close the modal.
Bulma supports a couple of different modal styles. You can control what time is used using the style
option when creating the modal. By default a modal with use the card
style. This is the traditional style of a modal and has a header, content area and footer. The alternative value is image
which will use the image type instead.
If your modal is showing important information you may want to restrict how a user closes it. By default a modal can be closed in a few different ways:
A modal can also be closed through a button press, although this is controlled when the modal is being created and is not default behaviour.
A modal can be configured so that it is restricted and can only be closed via the Javascript API. This means the user would have to click one of the buttons you provide to them. To enable this pass the closable: false
option when creating the modal.
Most modals will need the addition of buttons to provide the user with some control over what to do. By default a modal will contain a close button in the upper right corner. However, you can specify additional buttons.
If you choose to create the modal primarily in HTML, then you'll need to manually add event listeners to your buttons. Otherwise, you can use the buttons
option when creating your modal.
The buttons option takes an array of objects. Each object within the array represents a button. Each object will need to contain the following properties:
The modal plugin provides two callback events. onOpen
and onClose
. A onOpen
callback as an option when creating the modal will allow you to detect when a modal is open, onClose
will detect the reverse. Both events receive the modal instance as their only argument and are called after the is-active
class has been added/removed from the modal.