openfoodnetwork/app/webpacker/controllers/help_modal_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["background", "modal"]

  open() {
    this.backgroundTarget.style.display = "block"
    this.modalTarget.style.display = "block"

    setTimeout(() => {
      this.modalTarget.classList.add("in")
      this.backgroundTarget.classList.add("in")
      document.querySelector("body").classList.add("modal-open")
    })
  }

  close() {
    this.modalTarget.classList.remove("in")
    this.backgroundTarget.classList.remove("in")
    document.querySelector("body").classList.remove("modal-open")

    setTimeout(() => {
      this.backgroundTarget.style.display = "none"
      this.modalTarget.style.display = "none"
    }, 200)
  }

  closeIfEscapeKey(e) {
    if (e.code == "Escape") {
      this.close()
    }
  }
}