How can I prevent a modal (using the Bulma CSS framework) from closing if the user clicks outside of it?

Question

Bulma is a pure CSS framework and does not provide JavaScript. That being said, how would I go about adding JavaScript to prevent the modal component (specifically the card variant) from being closed if a user clicks outside of the modal or preventing it from closing if they hit ESC on their keyboard?

Kamenskuralski

Answer 1

In the example, they probably coded that behaviour. Bulma does not include it. To activate the modal, just add the is-active modifier on the .modal container. As long as you don't remove the is-active modifier yourself, the modal will stay open.

Iguanodon

Thanks, for some reason I didn't consider that they added JavaScript on the demo site to make it functional. After testing, I realize that simply clicking outside the modal will not have any effect. With everything that CSS can do on its own these days, I assumed it was still CSS only. – Kamenskuralski

This has some nice options like modals etc.. buefy.github.io/#/documentation/modal and works with all the Bulma css. – Fluky

Answer 2

Since you have to write the JS yourself, only remove the modal classes when you click the close button or whatever it is you want to trigger closing the modal.

Here's the code from the bulma docs

$(".modal-button").click(function() {
  var target = $(this).data("target");
  $("html").addClass("is-clipped");
  $(target).addClass("is-active");
});

$(".modal-close").click(function() {
  $("html").removeClass("is-clipped");
  $(this).parent().removeClass("is-active");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet">

<!-- modal button -->
<p>
  <a class="button is-primary is-large modal-button" data-target="#modal">Launch example modal</a>
</p>

<!-- modal content -->
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <article class="media">
        <div class="media-left">
          <figure class="image is-64x64">
            <img src="http://bulma.io/images/placeholders/128x128.png" alt="Image">
          </figure>
        </div>
        <div class="media-content">
          <div class="content">
            <p>
              <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
              <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
            </p>
          </div>
          <nav class="level">
            <div class="level-left">
              <a class="level-item">
                <span class="icon is-small"><i class="fa fa-reply"></i></span>
              </a>
              <a class="level-item">
                <span class="icon is-small"><i class="fa fa-retweet"></i></span>
              </a>
              <a class="level-item">
                <span class="icon is-small"><i class="fa fa-heart"></i></span>
              </a>
            </div>
          </nav>
        </div>
      </article>
    </div>
  </div>
  <button class="modal-close"></button>
</div>

Hypogastrium

Answer 3

As you said, bulma does not provide any js for you. So, if and how you handle the close event of the modal is completely on you.

Something like this would close the Modal only if one of the corresponding buttons gets clicked.

  var modal = document.getElementById('modal');
  var elements = document.getElementsByClassName('toggle-modal');
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', toggleClass);
  }

  function toggleClass() {
    modal.classList.toggle('is-active');
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet"/>
  
  
  <button class="toggle-modal">Open Modal</button>
  <div class="modal" id="modal">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
        <button class="delete toggle-modal"></button>
      </header>
      <section class="modal-card-body">
        <!-- Content ... -->
      </section>
      <footer class="modal-card-foot">
        <a class="button is-success toggle-modal">Save changes</a>
        <a class="button toggle-modal">Cancel</a>
      </footer>
    </div>
  </div>

Blackguardly

Answer 4

The easiest thing to do is not use their "built-in" background and just set a background color for the first modal div. I got around it in my React app by doing this:

<div style={{ backgroundColor : 'rgba(0,0,0,0.86)'}} id="modal-image-detail" className="modal modal-fx-superScaled">

and then I deleted the className="modal-background" from the second div

Army