Multi modal in Bootstrap 4

bs-multimodal.js

(function ($) {
  var DATA_KEY     = 'bs.multimodal'
  var EVENT_KEY    = '.' + DATA_KEY
  var DATA_API_KEY = '.data-api'

  var Event = {
    SHOW           : 'show' + EVENT_KEY,
    CLICK_DATA_API : 'click' + EVENT_KEY + DATA_API_KEY
  }

  var Selector = {
    DATA_TOGGLE : '[data-toggle="multimodal"]',
  }

  var getTargetFromElement = function (element) {
    var selector = element.getAttribute('data-target')
    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || ''
    }

    // if it's an ID, escape
    if (selector.charAt(0) === '#') {
      selector = selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1')
    }

    try {
      var $target = $(document).find(selector)
      return $target.length > 0 ? $target : null
    } catch (error) {
      return null
    }
  }

  $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
    var $target = getTargetFromElement(this)
    $target.modal({
      backdrop: false
    }).modal('show')
  })
})(jQuery)