Report a Bug - Modal

In order to create the Report a Bug modal, you need the following components:

• A Button element
• Bulma’s Modal component
• Bulma’s Notification element

Note: To see the full code of the example used in this book take a look at the book’s accompanying GitHub page.

For our example you need a button with data-target pointing to the id of the modal. In Bulma, modals can be shown and hidden using the is-active class. Using Vanilla Javascript you can add and remove the is-active class using the classList property, targeting the unique modal component id on the button click.

<!-- trigger button markup -->
<button class="button is-white open-modal-button" data-target="report-a-bug">
    <span class="icon">
        <i class="fa fa-bug"></i>
    </span>
    <span>
        Report a bug
    </span>
</button>

You can also add a notification element to show success...