在打字稿中使用纯 javascript 隐藏 bootstrap 模态

Question

我正在使用带有 bootstrap 的 Aurelia 来显示要求确认以清除表单详细信息的模式。我为此创建了 plunker link。如何在不使用 bootstrap 提供的 JQuery 来触发事件以关闭模式的情况下隐藏 bootstrap 模式？我在下面尝试隐藏有效的模态。但是当你想再次显示它时会破坏模态。

document.getElementById("confirmationRequired").style.display = 'none';

当我尝试点击清除按钮时，出现以下错误。

Answer 1

我理解（并分享）您希望尽可能避免 JQuery 的偏好，但是当您使用 JQuery 组件时，船已经起航了.. :- )

为了回答您的问题（并说明为什么在使用 JQuery 时很难避免 JQuery），这里有 2 种使用 "plain JS" 隐藏它的方法：

1。从 bootstrap's Modal.hide():

复制代码

如您所见，它所做的不仅仅是应用 hide 样式。这就是为什么它不起作用的原因。

if (event) {
  event.preventDefault()
}

if (this._isTransitioning || !this._isShown) {
  return
}

const hideEvent = $.Event(Event.HIDE)

$(this._element).trigger(hideEvent)

if (!this._isShown || hideEvent.isDefaultPrevented()) {
  return
}

this._isShown = false
const transition = $(this._element).hasClass(ClassName.FADE)

if (transition) {
  this._isTransitioning = true
}

this._setEscapeEvent()
this._setResizeEvent()

$(document).off(Event.FOCUSIN)

$(this._element).removeClass(ClassName.SHOW)

$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)


if (transition) {
  const transitionDuration  = Util.getTransitionDurationFromElement(this._element)

  $(this._element)
    .one(Util.TRANSITION_END, (event) => this._hideModal(event))
    .emulateTransitionEnd(transitionDuration)
} else {
  this._hideModal()
}

我以前尝试过类似的事情，通常在得出结论认为我应该让库处理它之后，我会浪费一个晚上的工作（弄清楚并将所有依赖项捆绑在一起）。

这并不是说这完全是浪费时间。这样做可以帮助您更好地理解这些库在幕后是如何工作的，并最终在漫长的运行中节省时间，因为 API 会给您带来更少的惊喜。

2。手动调用 `Modal.hide()`

这涉及在元素上找到正确的 jQuery 对象，获取所需的对象实例，然后对其调用适当的方法。一种快速而肮脏的方法：

const el = document.getElementById("confirmationRequired");
const modal = Object.getOwnPropertyNames(el)
    .filter(n => n.startsWith("jQuery"))
    .map(n => e[n]["bs.modal"])
    .find(j => j !== undefined);

modal.hide();

或者..

我只是用 jQuery 做同样的事情，但代码更少，更可靠。

正如杰西已经指出的那样，如果您想避免 JQuery，aurelia-dialog 是必经之路。有一个学习曲线，但一旦你掌握了它，它就是一个非常简洁的库。

有人可能会争辩说：为什么不只使用 bootstrap 中的 CSS 手动滚动您自己的模态逻辑来设置对话框样式？模式不过是两个简单的部分：

具有阴影和正 z-index 的固定屏幕填充元素，使应用程序的其余部分在模态处于活动状态时不可点击。简单地 show/hide 它与 CSS。
普通表单元素，固定且居中，z-index 高于屏幕填充。您可以将其设为自定义元素并使其真正简单，让它通过 EventAggregator 进行通信，这样您就不需要对紧密耦合的绑定进行任何操作。

添加一些事件处理程序，例如 esc 并在模态外部单击作为关闭模态的替代方法，您就成功了。

在打字稿中使用纯 javascript 隐藏 bootstrap 模态

Hiding bootstrap modal with plain javascript in typescript

aurelia

1。从 bootstrap's Modal.hide():

2。手动调用 Modal.hide()

或者..

2。手动调用 `Modal.hide()`