如何在Bootstrap 4中扩展模态框？

Question

首先，我在JavaScript中遇到了一个关于面向对象编程的问题，对此我了解得很少，但我需要解决这个问题…

好吧，我想在Bootstrap 4上使用一个为Bootstrap 3制作的库：https://github.com/nakupanda/bootstrap3-dialog

但我得到了以下错误信息：“无法将类用作函数调用”

查看代码，我发现了一些问题：

1 - classCallCheck：这是抛出错误的函数。我认为它强制用户使用“new”并实例化对象，并且永远不会像调用函数那样调用；

2 - createClass：这是一个构造类的函数，因此在Bootstrap 4中定义的类不是按常规方式定义的。

3 -inherits：这是另一个函数，并显示继承也不是常规的。

4 - 该库具有扩展Bootstrap模态框的代码:

var BootstrapDialogModal = function (element, options) {
    Modal.call(this, element, options);
};

但是，Modal.call触发错误："Cannot call a class as a function"。

我认为唯一的问题是BootstrapDialogModal在Bootstrap 3所施加的继承条件中继承了Modal，而当Bootstrap 4激活时，这些条件不同。

以下是jsfiddle：http://jsfiddle.net/g6nrnvwu/

有人知道如何调整这段代码吗？

谢谢。

- Doglas

---

Bootstrap 4是从Bootstrap 3进行的一次巨大更新/重制。这是因为（可能）在bootstrap 4中有一个冲突的新类名叫做“Modal”。您可以尝试更改库中所有名为“Modal”的函数的名称为其他名称。也许它会起作用，除非还有更多的冲突。最好使用另一个替代库或自己制作（因为我这样做了，我确信少用第三方库可以更快地加载页面）. _. - Taufik Nur Rahmanda

请提供 jsfiddle。 - Navjot Ahuja

你会收到以下错误信息“无法将类作为函数调用”，因为你不能将类用作函数。在Bootstrap 4中，Modal是一个类，如果插件正在使用基本的Modal类，则应该扩展它。我建议你忘记使用这种组合，因为你不能仅凭几行代码就解决问题（还要考虑到Modal在通往Bootstrap 4的路径上进行了重新设计）。你的问题只能通过完全重写插件来直接解决。 - Thelambofgoat

@NavjotAhuja 请点击以下链接访问JsFiddle: https://jsfiddle.net/g6nrnvwu/ - Doglas

Answer 1

您可以查看这个拉取请求，其旨在将插件更新到BS 4：https://github.com/nakupanda/bootstrap3-dialog/pull/281/files?diff=unified。

- Mohamed Chaawa

Answer 2

好的，这并不是一个确切的答案，但是也许可以帮助您的示例。这是一个我制作的类，用于动态处理模态框并在运行时插入其标记。它不是BS4，但也许可以作为指南使用？

ModalUtils

- Marco