使用 Vanilla Javascript 的 Bootstrap 模式

Question

我在组件 A（导航）中有站点导航。 我在组件 B (BootstrapModal) 中有一个工作引导模式。 在 index.html 中引用组件 A 以显示导航。

我试图完成的是一种在用户单击包含“示例”CSS 类的导航项时从组件 B 调用模式窗口的方法。

因此，当 CSS 类存在时，将需​​要条件语句来调用模态。

请注意，这是使用引导模式，无法将 data-target="#myModal" 添加到组件 A。

Answer 1

这是对马特在他的回答中的评论的回应：

注意：我知道您说的是“Vanilla javascript”，但是您使用 Bootstrap 的事实似乎表明您没有使用纯“Vanilla Javascript”。 只是您需要一种打开模态的编程方式。

我将其发布为答案，因为我目前的代表不到 50 人且无法发表评论。

此外，当马特写下他的答案时，这可能与过去无关，但现在是，所以这里是：

Bootstrap 5 正在删除 jQuery，因此任何使用或旨在使用 Bootstrap 5 的新代码都需要与 Matt 对这个问题的回答不同的答案。 同样，这不是答案，我没有找到。 只是想提高认识。 目前，这使得升级到 Bootstrap 5 有点困难。

Answer 2

jQuery(document).ready(function() {
     jQuery('a.className').on('click', function(e) {
          e.preventDefault();
          jQuery('#myModal').modal('show');
     });
});

Answer 3

只需使用基于 jQuery 中的hasClass函数的if语句在要定位的项目的单击事件上使用引导程序的 api：

$('#myTarget').on('click', function(e) {
  if ('#myElement').hasClass('example') {
    $('#myModal').modal('show');
  }
});

注意：我知道您说的是“Vanilla javascript”，但是您使用 Bootstrap 的事实似乎表明您没有使用纯“Vanilla Javascript”。 只是您需要一种打开模态的编程方式。