JavaScript for Bulma Modal

This post is for those who do not want to write their own JavaScript code, and just want to use the same code as that in Bulma official website [1].

The JavaScript code comes from main.js used in the official site [2]. I put the code here in the post for easy search by Google or other search engines.

'use strict';

document.addEventListener('DOMContentLoaded', function () {

  // Modals

  var rootEl = document.documentElement;
  var $modals = getAll('.modal');
  var $modalButtons = getAll('.modal-button');
  var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');

  if ($modalButtons.length > 0) {
    $modalButtons.forEach(function ($el) {
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        var $target = document.getElementById(target);
        rootEl.classList.add('is-clipped');
        $target.classList.add('is-active');
      });
    });
  }

  if ($modalCloses.length > 0) {
    $modalCloses.forEach(function ($el) {
      $el.addEventListener('click', function () {
        closeModals();
      });
    });
  }

  document.addEventListener('keydown', function (event) {
    var e = event || window.event;
    if (e.keyCode === 27) {
      closeModals();
    }
  });

  function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
      $el.classList.remove('is-active');
    });
  }

  // Functions

  function getAll(selector) {
    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
  }

});

Demo:

You might be interested in ...

Tested on:

Chromium 64.0.3282.140 on Ubuntu 17.10 (64-bit)
Bulma 0.6.2

References:

[1]	Modal \| Bulma: a modern CSS framework based on Flexbox

[2]	https://bulma.io/lib/main.js?v=201802091742