Search code examples
htmlcssmodal-dialogbulma

Bulma CSS modal not showing

I am using Bulma as my CSS framework, and while trying to use their modals, they aren't styled at all, as if I'm missing something.

enter image description here

The overlay is there, and x button seems in place and visible, but the content is greyed out.

I am using this code:

<body>

<div id="modal-id" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-content">
        Any other Bulma elements you want
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

</body>

All other Bulma elements are working.

Note: I am not asking about JS part and how to actually show the modal on click. I am having pure CSS issues.

Solution

  • But this is currently being shown and there is no problem!

    if you want a Design, like a card, change .modal-content div to this:

      <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      YOUR CONTENT
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>