SimpleModal 和 Bootstrap 模态之间的冲突

Posted 2023-05-08

【中文标题】SimpleModal 和 Bootstrap 模态之间的冲突

【英文标题】：conflict between SimpleModal and Bootstrap modal

【发布时间】：2014-09-13 06:48:12

【问题描述】：

我将这两个插件都包含在同一页面中，这导致它们之间发生冲突。

我删除了 Bootstrap.min.js 并且 SimpleModal 工作正常。 我删除了 jquery.simplemodal.js 并且 Bootstrap modal 工作正常。 如果 jquery.simplemodal.js 包含在 bootstrap.min.js 之前，我尝试调用引导模式。

如果在 Bootstrap 之后包含 SimpleModal，我会在 Firebug 控制台上收到此错误

i.modal(...).one is not a function **..blah blah..** bootstrap.min.js (line 6)

【问题讨论】：

为什么不只使用一种模式？如果 Bootstrap 支持您的整个网站，为什么不使用 Bootstrap 模型本身，因为它与其他组件也很好？

我在我的应用程序中有一个地方，如果我包含 Bootstrap 文件，我的整个页面的 UI 都会受到干扰，所以我在那个地方包含了 SimpleModal，结果我也在这个页面上添加了这个模式。

但是你现在已经被整个事情所困扰了。

“我的应用程序中有一个位置，如果我包含引导文件，我的整个页面的 UI 都会受到干扰”——听起来你需要重新编写代码......

【参考方案1】：

使用the noConflict feature of Bootstrap's JS plugins，例如：

<script src="bootstrap.min.js"></script>
<script>
  var bsModal = $.fn.modal.noConflict();
</script>
<script src="SimpleModal.js"></script>

【讨论】：

它显示了我在这个问题中提到的相同错误:(

@vin 你在使用 Bootstrap v3.2.0 吗？

它在 v3.3.7 中也显示错误。什么是替代解决方案？

【参考方案2】：

您可以在这里自定义Bootstrap提供的js：http://getbootstrap.com/customize/。在 javascript 组件部分取消选中“Modals”，您应该可以很好地使用 SimpleModal 而不会与 Bootstrap modal 冲突。

【讨论】：

我怎样才能只为 Modal 和与 Modal 相关的 CSS 类自定义引导程序？

1.在 Less 文件部分单击“切换”（它将取消选择所有内容） 2. 在 Less 文件 -> JavaScript 组件中选择“Modals” 3. 在 jQuery 插件部分单击“切换”（它将取消选择所有内容） 4. 在jQuery 插件 -> 链接到组件 5. 点击页面底部的编译和下载