Search code examples
htmlcssmodal-dialogbulma

How to prevent Bulma modal from showing by default

According to Bulma's site (and everywhere else) modals are not supposed to show unless they have the "is-active" class attribute. However, my modals keep showing up as formatted text wherever I put them. They do not pop-up over the page, and they always show. I'm guessing I need to add something in mystyles.css as "modal" never appears in the 3416 lines of code created by Bulma.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet" />
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content has-background-white py-5 px-5">
    <h3 class="title mb-6">
      Hi mom
    </h3>
  </div>
</div>

And here is what my site looks like on page load: OUTPUT

Does anyone know what code I need to add to get the regular modal behavior?

Solution

  • In your code snippet it works just fine and the modal is being hidden (display: none; on the .modal class by bulma). So you are probably not loading in bulma properly..