Question

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

我想要实现的是一种在用户点击包含“示例”CSS类的导航项时从组件B调用模态窗口的方法。

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

请注意，这是使用bootstrap模式，我无法将data-target =“＃myModal”添加到组件A.

Answer 1

根据jQuery中的if函数，使用hasClass语句在您要定位的项目的click事件上使用bootstrap的api：

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

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

Answer 2

这是对Matt在其回答中的评论的回应：

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

我将其发布为答案，因为我目前的代表人数少于50，并且无法发表评论。

此外，当Matt写出答案时，这可能并不重要，但现在就可以了，

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

Answer 3

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

使用Vanilla Javascript的Bootstrap模态

3 个答案: