javascript - 更改 Bootstrap 的默认模态类

Question

我需要更改 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”，但我在控制台中收到以下错误:Uncaught ReferenceError:分配中的左侧无效。

谁能提供一些见解，确切说明我需要在 JS 文件中更改哪些行才能使这项工作正常进行？

我需要更改此设置的原因是，我正在将 Bootstrap 实现到一个内部 CMS 中，该 CMS 已经使用类 .modal 作为它自己的模态，这会导致与 Bootstrap 发生冲突。

Answer 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);