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?

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.

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>

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>