更改 Bootstrap 的默认模态类答案

【问题标题】：Changing Bootstrap's Default Modal Class更改 Bootstrap 的默认模态类
【发布时间】：2015-12-11 22:57:07
【问题描述】：

我需要更改 Bootstrap 的 Javascript 和 CSS 文件，以更改应用于包含模态的主要 div 的类名。

这是默认容器：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

这就是我想改变它的方式：

<div class="MY-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

我尝试运行 modal.js 和 modal.less 文件并将所有对“.modal”的引用更改为“.MY-modal”，但我在控制台中收到以下错误：未捕获的 ReferenceError：分配中的左侧无效。

谁能提供一些见解，了解我需要在 JS 文件中更改哪些行才能使其正常工作？

我需要改变这一点的原因是，我正在将 Bootstrap 实施到一个内部 CMS 中，该 CMS 已经将类 .modal 用于它自己的模态，这会导致与 Bootstrap 发生冲突。

【问题讨论】：

我认为您在编辑 modal.js 时更改了太多 - 这也是一个非常糟糕的做法。为什么不直接调整已经存在的模态？或者使用 bootstrap modal 的 javascript api 来调用它，如 $('.MY-modal').modal(options)
不要破解核心，伙计！当你（或者，宙斯禁止，其他人）需要更新 Bootstrap 时会发生什么？卡布姆。
不幸的是，我们需要使用的 CMS 的本质是对内容使用内联编辑。因此，bootstrap 的 CSS 与系统的功能有冲突。模态似乎是唯一冲突的特性，我们将保持我们自己的 Bootstrap 风格。我们所做的所有更改都会被记录下来，因此未来的升级应该不会成为太大的问题。

标签： javascript css twitter-bootstrap twitter-bootstrap-3 less

【解决方案1】：

我所做的是为基类 .modal 创建一个修饰符类（例如 .modal--custom）

如果你使用 sass，就这么简单：

$modal-name: 'modal';

.#{$modal-name} {
    &--custom {
        .#{$modal-name}-dialog {
            // some custom styling
        }
        .#{$modal-name}-footer {
            // some custom styling
        }
        .#{$modal-name}-body {
            // some custom styling
        }

    }
}

然后你同时应用两个

<div class="modal modal--custom"></div>

更成问题的是模态背景。我为此使用了一些解决方法，它基本上在调用.show() 方法之后立即添加了一个自定义类：

(function ($) {
    'use strict';

    const backdropClassName = 'modal-backdrop--custom';

    $(() => {
        $('body').on('show.bs.modal', '.modal', () => {
            setTimeout(() => {
                const $modalBackdrop = $('.modal-backdrop');
                if ($modalBackdrop.length > 0 && !$modalBackdrop.hasClass(backdropClassName)) {
                    $modalBackdrop.addClass(backdropClassName);
                }
            });
        });
    });

})(jQuery);

【讨论】：