从Webpack bundle.js获取/导入bootstrap.js

时间:2019-01-11 13:52:36

标签: javascript webpack

对不起,我没有使用webpack的经验。

我有一个用Webpack生成的模板页面。

使用bootstrap.js的页面显示模式对话框

bundle.js中包含的bootstrap.js

我需要模式窗口的显示/隐藏/监听事件,但我无法使用 $('#dialog')。modal('hide'),因为未加载引导程序(在当前上下文中?)

我如何在bundle.js中导入/获取对bootstrap.js的访问权限?

Examples - try to close modal with button "Close with JS"

Sample #1 used bootstrap.js from bundle.js

错误

  

$(...)。modal不是函数

Sample #2 used bootstrap.js from bundle.js and in html

错误

  

未删除模式背景渐变

导入设置

enter image description here

1 个答案:

答案 0 :(得分:1)

我只是检查您的Codepen示例,并以某种方式在您的两个示例上生成2模态背景。 (带或不带引导程序)

enter image description here

其中一个在另一个关闭时保留在页面上。

我只是检查bootsrap上是否有任何bug或其他东西,并在github上遇到封闭问题;

https://github.com/twbs/bootstrap/issues/679

不知何故,有些人也面临着您的问题,并且是由许多问题引起的。

您可以使用快捷方式示例在您的带有引导程序的示例上手动删除第二个背景。

更新

在Alexandr Sulimov的反馈之后,我再次对其进行了重新搜索,发现一个关于stackoverflow的话题也与此类似;

How to hide Bootstrap modal from javascript?

我在带有bootstrap codepen的示例中对其进行了测试,并且效果很好

$("[data-dismiss=modal]").trigger({ type: "click" });

@Alexandr,根据我的理解,您可以尝试下面的代码吗?

$(function(){
   $('#closeWithJS').on('click', function(){
       $("[data-dismiss=modal]").trigger({ type: "click" });
   });
});